HTML5入门（CSS样式-------------------（CSS基础知识点----------------------------））

CSS继承性+层叠性+盒子+浮动

1、CSS继承性

eg:

                <style>

                              div{

                                     color: pink;

                                     font-size: 30px;

                                     width: 500px;

                                     background: green;

                                     padding: 100px;

 

                                   }

                              p{

                                       color: red;

                                 }

                </style>

                 <div>

                          <p>咱们都是好孩子</p>

                          <ul>

                                     <li>

                                          <p>咱们都是栋梁之才</p>

                                     </li>

                          </ul>

              </div>

经过以上的代码。，咱们能够看到p标签继承了div设置的样式。

继承不只仅是子代，能够是子代的子代。能够一直延续。

继承是有原则的：通常是color、text—、font-、line- 这些属性。

2、层叠性

2.1

在css中有许多的重叠样式，在众多的样式中选择元素须要的那一个。那么该如何去选择呢？ 在浏览器的内核中有着严谨的权重计算公式，经过权重计算公式去选择须要的样式。

权重公式：id选择器，类选择器，标签选择器  优先级依次减少。

1.若是元素被选中了，那么就可使用权重公式来计算大小，大的将被使用。若是同样大小，则谁写在了后面就使用谁。

2.若是元素没有被选中，则经过继承的方式传递样式，这时权重能够看作为0. 这种状况下咱们使用就近原则，就近原则：谁靠着该元素近那么就选谁。

3.若是元素没有被选中，而且距离元素都同样近，这时咱们又可使用权重计算公式。 若是权重同样大小，则谁写在了后面就使用谁。

2.2

eg:

             .two{

                   color: green;

                   }

            .one{

                  color: red;

                 }

                <p class="one two" id="haha">咱们都在学习H5</p>

以上这种状况，是按照样式的前后去选择。与html中元素设置的class属性名字先后顺序无关。

2.3

           ！Important ：提高属性的优先级。

             eg:      #haha{

                              color: orange;

                              font-size: 20px;

                            }

                        p{

                              color: blue !important; 提高属性的优先级

                              color: blue; !important;

                               font-size: 14px;

                          }

                 /*不影响就近原则*/

                 .heiheihei{

                              color:yellow !important;

                              }

                      .xixi{

                              color: skyblue;

                            }

须要注意三点：

1.它只针对于属性有效，须要注意正确的书写方式，写在分号内。

2.它没法提高继承性的选择器权重（也就是未选中该属性的选择器），该是0仍是0

3.它不影响就近原则。

 

 

 

3、盒子模型

3.1盒子

盒子包含5个元素：width、height、padding、border、margin

 

Width：必定要注意width是内容的宽度。

Height：注意height是内容的高度。

Padding：内边距，内容与边框之间的间隙

Border：边框

Margin：外边距，相对于内边距记忆。边框外部的间隙

3.2padding内边距

Padding有四种书写方式：

一、padding：20px； 表明上右下左四个方向都是20像素的边距

二、Padding：20px 30px；第一个数字是上下方向的大小，第二个数字是左右方向的大小

三、Padding：20px 30px 40px；第一个数字是上方向的大小，第二个数字是左右方向上的大小，第三个是下反向的边距大小

四、Padding：10px 20px 30px 40px；这分别是四个方向上的边距大小。

 

Padding边距的另外一种写法形式

padding-top: 10px;

padding-right: 70px;

padding-bottom: 80px;

padding-left: 90px;

分别写四个方向上的边距大小。

3.3border边框

Border的写法：

border: 10px solid #567;

三个属性分别表明了：宽度、样式、颜色； 颜色是能够省略的默认为黑色，可是其它两个属性是不能够省略的。

线条样式：有不少种，举例：solid实线 dashed虚线 outset突出感 inset凹

border-width: 10px;

border-style: dashed;

border-color: #567;

单独写边的宽度、样式以及颜色。这样写仍是四条边共用。

 

border-top: 10px solid red;

border-right: 5px solid yellow;

border-bottom: 15px solid blue;

border-left: 20px solid #789;

这是分别给每一条边设置宽度、样式和颜色。

 

border-top-style: dashed;

这是顶边设置样式属性，也就是说每一条边每一种属性均可以单独去写。

 

4、标准文档流

4.1

标准文档流中的几种现象：

1.排布的顺序为从左到右，从上到下。

2.空白折叠现象，若是html语言中有换行或者空格、缩进都会替换为空格在网页中显示。

3.在同一行中，底部基线对齐。

4.文本自动换行。

根据标准文档流将标签分为两种类型：

块级标签：独占行，能够设置宽高以及边距，通常能够听任意内容（P标签除外）。

行内标签：能够在一行内显示，不能够设置宽高以及某些间距，通常是文本级标签（p除外）。

4.2

在标准文档流中，也能够实现块级元素与行级元素的身份互换。只须要经过display属性进行互换

Display：block；设置为块级元素

Display：inline；设置为行内级元素

Display：inline_block; 设置为行内块级元素。行内块级元素：在行内显示，不独占行。而且能够设置宽高和边距。

5、浮动

浮动就是让咱们的元素脱离标准文档流，目的是为了布局好看！

浮动的现象：

1.脱离标准文档流被叫作脱流，同时会出现字围现象。我是老二没有被盖住！！

 

2.浮动的元素会相互贴靠，并且若是父容器空间足够大，则浮动的元素会正常紧靠也就是后一个元素会紧靠前一个元素。若是父容器空间不够大，那么元素会找上级的上级去紧靠，若是还找不到则继续找上级紧靠，没有了上级可靠那就靠边。

 

 

 

3.浮动的元素不分块级和行内类别，也就是说均可以设置宽高可边距。

4.浮动之后，同一行内的元素以顶边做为基线对齐。