CSS笔记(二)

知识点一:CSS书写规范

1、空格规范:  

a) 选择器与{之间必须包含空格

b) 属性名与之后的 : 之间不允许包含空格, : 与属性值之间必须包含空格

2、选择器规范: 

a) 当一个rule包含多个selector时,每个选择器声明必须独占一行

b) 嵌套层级应不大于 3  

3、属性规范:

a) 属性定义后必须以分号结尾 

b) 属性定义必须另起一行

4、a标签去下划线text-decoration:none 

5、li标签去点list-style:none

6、快速搭建页面ul>li*5

table>tr*5>td*6

div.box            类 

div#box           id

知识点二:块状元素

1、元素《==》标签

2、标签的显示模式:块状元素、行内元素(内联元素)、行内块元素 

3块状元素:    div/h1-h6/p/ul/li/ol/dl/dd/dt/table/tr/td/caption/thead/tbody/form/textera/

     块状元素的特点1、有默认的宽高,宽是父元素的100%,高度是内容所称起来的高度

                          2、宽高是可以设置的

                          3、独占一行

                          4、可以容纳其他的块状元素、行内元素、行内块元素

                          5、可以设置外边距、内边距、边框

  注意:h标签、p标签尽量的不要去容纳块状元素 

知识点三:行内元素

   1、行内元素span b strong i em u ins s del a

   2、行内元素的特点 1、有默认宽高,都是内容所撑起来的

                             2、宽高设置无效

                                       3、与相邻的行内元素或者行内块元素同一行上显示

                                  4、可以去包含行内元素,但是不能包含块状元素及行内块元素

                             5、水平方向上的外边距和内边距是可以设置的,垂直方向无效,边框也是可以设置的

 注意:a标签可以去包含块状元素以及行内元素 ,链接里面不能再放链接

知识点四:行内块元素

  1行内块元素img/input/

  2行内块元素的特点1 有默认的宽高,就是自带的宽高

                             2、可以设置宽高

                             3、可以与相邻的行内元素和行内块元素在同一水平线下显示

                             4、外边距、内边距、边框都是可以设置的

知识点五:元素的转化

块转行内display:inline;

行内转块display:block;

块、行内元素转换为行内块 display: inline-block;

 

posted on 2020-08-16 17:14  cx125  阅读(76)  评论(0编辑  收藏  举报

导航