html&css

 

基础

继承性

1、以color|font|text|line开头的属性才可以继承 2、a标签无法继承color 应用场景:文字颜色,字体,文字大小等共性信息

选择器

  1. 伪类(a:link :正常链接, a:visited ,访问过的链接;a:hover 滑过的链接;a:active,正在点击的链接)

  2. 伪元素选择器 ::before表示元素最前面的部分,一般结合content一起使用,不可选中

  3. 属性选择器:input[type="text"] | [class^="col"]

高度塌陷

父元素的高度会被子元素默认撑开 当子元素设置float后,子元素会完全脱离文档流,父元素高度塌陷 解决高度塌陷方法 (overflow :hidden) 每个元素有个一个隐藏的属性 BFC(默认关闭) 开启后 1.开启bFC的元素可以包含浮动的子元素 2.bfc元素不会被浮动覆盖 开启方法: 1.设置浮动 2设置元素绝对定位 3设置元素为inline-block 4.将元素的overflow设置为一个非visible(隐藏的)(auto / hidden推荐);

 

表格

table:创建表格/是一个块元素 thead:表头 tbody:表格主体 就算没写,浏览器会自动添加一个tbody tr是tbody的子元素而不是table的子元素

tr:表列/行 th:表头 td:单元格/列 表格的列数有最多的一行决定 tfoot:表格底部 永远显示在表格底部 补充 合并单元格: rowspan: 纵向合并单元格 colspan:横向合并单元格 border-spacing :table和td边框之间默认有一个距离 border-collapse : 设置表格的边框合并,border-spacing会默认失效

子元素和父元素相邻的垂直外边距会发生重叠,子元素的外边距会传递给父元素
可以将父元素的display改为table既可以
解决高度塌陷,确保父元素和子元素的垂直外边距不会重叠
.clearfix:before
.clearfix:after{ content: "" ,   display:table , clear:both;}
table{
 width: 100%;
 border-collapse: collapse;
}
tr{
 height: 42px;
}
td{
 border-bottom: 1px solid rgba(100,100,100,.1);
}

表单

action:地址提交处,必须写上一个地址,来传输表单填写的内容 value可以改变提交按钮的文字,也可以作为文本的默认值 name:如果希望表单项中的数据会提交到服务器中,还必须给表单指定一个name属性,name表示提交内容的名字 单选、多选按钮必须添加一个value值,被选中的表单项才可以将value值提交,默认被选中checked="checked" select:下拉列表,使用option创建列表项, select需要加一个name属性,option需要加一个value属性, 下拉列表默认选中:option中设置属性selected=“selected” optgroup:为option分组 可以通过lable属性来指定分组的名字 textarea:文本域-依旧需要指定文本域- cols/rows button:唯一的作用就是可以被点击 跟button标签一样 使用id + for可以对表单和文本进行关联 fieldset:为表单项进行分组 可以使用子标签legend对表单进行分组 lable:lable标签中通过for属性和输入框中的id进行绑定

文档流

  1. 垂直外边距合并:为元素设置 border-top或者padding-top

  2. display:none:设置该元素为隐藏元素,不会在页面中显示,也不会占据位置

  3. Visibility:hidden :元素不会显示在页面中显示,但是他的位置会依然保持

内联

  1. margin-top:内联元素的margin-top无效

  2. 高度:高度只受line-height|font-size|vertical-align

块元素

  1. 宽度默认100%;高度被撑开;独占一行

脱离文档流

float|absolute|bfc

  1. 块元素脱离文档流,宽度会被内容撑开,而不是默认文档流中的auto

  2. 内联元素脱离文档流,也会变成块元素,宽高可以设置

浮动

可以脱离文档流,产生浮动流 设置后,margin :0 auto会无效 如果浮动的元素上边是一个没有浮动的块元素,则浮动元素不会超过块元素 浮动元素不会超过他上边的兄弟元素,最多一边对其 浮动的元素不会盖住文字,文字会自动环绕在元素的周围

BFC

每个元素都有一个隐含的属性BFC:块级格式化 BFC默认是关闭的 开启BFC特性 1、父元素的垂直外边距不会和子元素重叠 2、开启BFC元素不会被浮动元素所覆盖 3、开启BFC的元素可以包含浮动的子元素 4、父元素可以包含子元素,大小也会被子元素撑开 开启方式(间接开启) 1,设置元素浮动 2’设置绝对定位 3、设置inline-blcok,父元素宽度会丢失 4、overflow:hidden;----->推荐方式

定位

相对定位: 相对与元素自身的定位,不会脱离文档流,元素会提升一个层级,元素会占据一个位置 绝对定位 现对与开启定位的父元素进行定位,脱离文档流,元素会提升一个层级,性质会发生变化内联元素会变成块元素,块元素高度和宽度会被内容撑开

背景

url():设置图片 可以同时为元素设置背景颜色和背景图片 background-reoead:no-repead:不重复 repead-x,repead-y background-position:center /也可以在后边添加两个定位值来表示top和left 背景图整合技巧(CSS-Sprite) 把:hover,:active的图片都合并在一张,然后伪类发生时就background-position像左移 优点:增加用户体验 可以简写

其他

字体图标

常用的图标库地址:https://www.iconfont.cn/ && https://icomoon.io/

尺寸单位

px: 像素是相对于显示器的分辨率而言的 em:相对单位 例:[ 1em=16px(浏览器默认行高16px)] rem:CSS3相对单位(rootem , 根em)

PS美工

界面选项 --->单位与标尺 ctrl+r打开标尺 f8查看尺寸

posted @ 2020-11-04 15:18  良荣十贰  阅读(65)  评论(0)    收藏  举报
点击右上角即可分享
微信分享提示