CSS 继承性

CSSj继承性总结

CSS 权重问题

复杂选择器权重计算

行内样式 1000id 选择器 100class 选择器 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 bdisplay: 修改元素的性质。 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;，再设置子元素。