CSS 继承性

CSSj继承性总结

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;，再设置子元素。

CSS-02