CSS 继承性
CSS 权重问题
复杂选择器权重计算
- 行内样式 1000
- id 选择器 100
- class 选择器 10
- 标签选择器 1
- 通配符/继承属性 0
标签的表现形式
- 块状标签:独占一行,宽高有效。不写宽度时,宽度是父元素(剩余)宽度的100%比如:
div
p
h1~h6
form
table
hr
br
ul>li
ol>li
dl>dt/dd
- 行内块标签:可以同一行显示,宽高有效。不写宽度时,宽度由内容支撑.比如:
input
select
img
button
- 行内标签:可以同一行显示,但是宽高无效。比如:
a
span
strong
del
ins
em
i
b
display:
修改元素的性质。- block:设置元素为块元素
- inline:设置元素为行内元素
- inline-block:设置元素为行内块元素
vertical-align
设置对象内容的垂直对齐方式。是容器中元素相对于内容的显示
简单点可以理解为行内块元素与文字的对齐方式
p{
background:orange;
}
img{
width:100px;
vertical-align: middle;
}
<p>this is paragraph!!!<img src="images/boy.jpg" alt=""/></p>
CSS 盒子模型
一个盒子我们会分成几个部分:
- 内容区(content)
- 内边距(padding)
- 边框(border)
- 外边距(margin)
padding
注:行内元素的上下只能看到,不占实际位置。左右正常占位。
padding:10px 20px 30px 40px;
这样会设置元素的上、右、下、左四个方向的内边距。padding:10px 20px 30px;
分别指定上、左右、下四个方向的内边距。padding:10px 20px;
分别指定上下、左右四个方向的内边距。padding:10px;
同时指定上左右下四个方向的内边距。- 同时在 css 中还提供了
padding-top
、padding-left
、padding-right
、padding-bottom
分别用来指定四个方向的内边距。
border
- 可以在元素周围创建边框,边框是元素可见框的最外部。
border:1px solid red;
分别指定了边框的宽度、颜色和样式,是一种缩写:border-width border-style border-color
。border-style:
none (默认) / dashed(虚线) / dotted(点) / solid(实线) / double(双实线)
。- 可以单独设置某一条边框:
border-right: 20px solid blue;
- 可以分开写:
border-width: 10px; border-color: orange; border-style: dashed;
- 圆角效果:border-radius
- border-top-left-radius: 20px;
border-top-right-radius: 10px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 30px;
写两个是左上右下和左下右上:
div{
border-radius:10px 20px;}
一半是圆形
margin
注:行内元素的上下只能看到,不占实际位置。左右正常占位。
- 设置方法和
padding
类似,同样也提供了四个方向的margin-top/margin-right/margin-bottom/margin-left
。 margin: xxx auto;
可以使块状元素水平居中。嵌套崩塌
:两个盒子发生嵌套的时候,给子类设置 margin 会给父类造成一种崩塌现象,子类元素的 margin-top 没有效果,而是直接作用到父类元素。
解决方案:
1. 父类 overflow: hidden;
2. 父类 设置极小的 padding 或者 border;
margin重叠
: 如果垂直方向上两个块状元素同时设置了 margin-bottom 和 margin-top,那么这两个值将会发生重叠,不会累加,哪个值大用哪个。
图文对齐问题
解决行内块元素和文字的对齐方式
1.默认 沿着 基线(baseline)对齐
2.middle、top、bottom
3.根据实际情况用数值调整
vertical-align: -8px;
换行符造成的间隙问题
1.不换行
2.word-spacing、图片可以用letter-spacing
3.先把父元素字符大小设置为font-size: 0;,再设置子元素。