<1..伪元素选择器(权重1)>
1. 选择第一个字符 只针对块元素
元素:first-letter{} 元素::first-letter{}
2. 选择第一行 只针对块元素
元素:first-line{} 元素::first-line{}
3. 给元素的里面的前面添加内容 内联元素
元素::before{
content: ""; 如果有字就加到引号里面,如果没字,就写空引号,必须存在
color:red;
width:100px;
}
4. 给元素的里面的后面添加内容 内联元素
元素::after{
content: ""; 如果有字就加到引号里面,如果没字,就写空引号,必须存在
}
<2..高度塌陷>
产生条件
(1)父元素不设置高 (2)子元素浮动
解决方法
1 给父元素加一个overflow:hidden;
2. a. 给浮动元素的后面添加一个块级元素
b. 给该元素设置clear:left/right/both
缺点:
造成代码冗余
3. 完美清除法
父元素::after{ 添加内联元素
content:"";
clear:both; 清除影响 只对块有效
display:block; 转换为块
}
<3..BFC(Block Formating Context): 块级格式化上下文(在页面中是一部分独立的、特殊的区域)>
触发条件
1. overflow:hidden/scorll/auto;
2. float:left/right;
3. display:inline-block/table-caption(表格标题)/table-cell(表格单元格)/flex(弹性盒)/inline-flex(内联弹性盒)
4. position:absolute(绝对定位)/fixed(固定定位)
特性
1. 在BFC的区域内,浮动元素的高度会计算在内 ---主要用来解决高度塌陷
2. BFC区域内的元素不会影响到外面的元素 --- 主要解决margin的bug
3. BFC的区域不会和浮动元素重叠 --- 主要解决浮动元素和正常元素重叠问题
calc() 可以运算%和px 但是符号的两侧需要有空格 如 width: calc(100% - 200px)
<4..css属性继承>
加在父元素身上的属性,会作用到他的后代
可以继承
1. 字体类 font-size/font-weight/font-style/font-family
2. 文本类 color/text-indent/text-ailgn/line-height/word-spacing/letter-spacing
3. 列表类 list-style-type/list-style-position/list-style-imagest/list-style
不可以继承
width/height/display/float/margin/padding/border/backgrond-color/text-decoration
继承样式的权重值最低,自己本身的样式比继承过来的样式权重要高,如果要修改本身自带样式,要改自己本身,不能改父元素
给带边框的元素或者在*里面添加 box-sizing: border-box; 解决浏览器缩小时候 内容掉下来的问题
<5..表格css属性补充>
table{
border-spacing: 0; 边框之间的距离 和cellspacing等同
border-collapse: collapse; 边框合并为细线边框 去掉间距后会变粗用该属性会变细
table-layout: fixed; 表格单元格宽度固定,默认宽度会跟随内容变化
}
<6..表格标签补充>
表格标题 caption 直接放到表格最顶端且居中
表格列标题 th 加粗且居中
表格行分组
thead 表头 一般只有一组,表头一般将整个列标题对应的行包裹进去
tbody 表体 一般可以有多组,放表格主要内容
tfoot 表尾 一般只有一组,放表格底部合计、统计行
<7..表单集>
form将表单元素包裹到该标签,做功能的时候写,做样式的话可以不写
action: 提交路径,路径后端会给我们提供
method: 提交方式 get/post
表单元素input select textarea 内联块
1. 单选框 <input type="radio" name="sex"> 起相同的name值可互斥
2. 下拉列表
<select name="" id="">
<option value="">选项值</option>
</select>
3. 文本输入框 <input type="text">
4. 密码输入框 <input type="password">
5. 多选框 <input type="checkbox">
6. 多行文本域 <textarea name="" id="" cols="30" rows="10"></textarea>
cols="30" rows="10" 行和列中字符的个数 受字体大小和行高影响 一般还是用宽高来限制区域的大小
resize:none;css属性默认用户可以拉伸框的大小,设置后禁止拉伸
7. 文件上传 <input type="file">
8. 提交按钮 点击该按钮 将表单信息提交到action的路径中 <input type="submit" value="按钮文本">
9. 重置按钮 点击该按钮,可以将手动填入的信息一次清空 <input type="reset" value="按钮文本">
10. 普通按钮 <input type="button" value="按钮文本">
表单属性
1. checked 默认选中
2. disabled 禁止选中
3. value 默认值
4. selected 下拉列表默认选中
<8..补充>
垂直对齐属性 verticali-align
- baseline 基线 x字母的底部,默认基线问题
- top 顶线, 行框(每一行的内联元素形成的行内框组成)的顶部
- bottom 底线,行框(每一行的内联元素形成的行内框组成)的底部
- middle 中线 该元素的垂直中心点和行框中x的1/2高度处对齐
图片底部留白的原因是因为存在幽灵节点(看不见的空白字符),和图片以基线的方式对齐了
图片的基线是图片底部
解决留白
1. img{display:block} 块不存在基线问题
2. img{float:left/right} 块不存在基线问题
3. 给图片的容器添加font-size:0 将幽灵节点大小去掉
4. img{vertical-align:top/bottom/middle} 更改基线对齐
内联块元素基线
1. 内联块里面不写内容的话,基线在整个框的底部
2. 内联块里面由一行内容的话,基线在该行x底部位置
3. 内联块里面由多行内容的话,基线在最后一行x底部的位置
应用
1. 内联元素和文字垂直对不齐的时候使用
2. 解决图片底部留白或者多行文本域旁边文字位置
3. 内联块元素中存在文字数不多对齐不一致的时候