CSS学习总结与心得体会

CSS的学习总结与心得体会

CSS又称为层叠样式表，学习CSS就是学习许多选择器以及属性。CSS的主要作用是对前端页面进行布局与美化。

---

布局

1. 盒子模型
2. 块级元素并排显示

盒子模型

盒子模型是对页面进行布局所需要使用的非常重要的一部分。盒子模型本质上就是一个盒子，它包括边距（margin）、边框（border）、填充（padding）、内容（content）、背景（backbround），下面对每一部分进行简单的说明。

• margin(外边距)：清除边框外的区域，外边距是透明的；
• border(边框)：围绕在内边距和内容外的边框；
• padding(内边距)：清除内容周围的区域，内边距是透明的；
• content(内容)：盒子的内容，显示文本和图像；
• backbround（背景）：背景包含背景颜色（background-color）、背景图（background-image），给整个盒子添加上背景样式。

盒子分类

• 块元素

块元素也称为行元素，在布局中常用的标签如：div p ul li h1-h6 dl dt dd等都是块元素，它在布局中的行为：
1、支持全部样式
2、如果没有设置宽度，默认宽度为父级元素宽度的100%
3、盒子占据一行，即使设置了宽度

• 内联元素

内联元素也成为内元素，布局中常用的标签如：a span em b strong i等都是内联元素，它们在布局中的行为：
1、支持部分样式(不支持宽、高、margin上下、padding上下)
2、宽高有内容决定
3、盒子并在一行
4、代码(html)换行，盒子之间会产生间距
5、子元素时内联块元素，父元素可以用text-align属性设置子元素水平对齐方式

• 内联块元素

内联块元素也叫内块元素，是新增的元素类型，现有元素没有归于此类别的，img和input元素的行为类似这个元素，但是也归类于内联元素，我们可以用display属性将块元素或者内联元素转化成这种元素，它们在布局中的行为：
1、支持全部样式
2、如果没有设置宽高，宽高由内容决定
3、盒子并在一行
4、代码换行，盒子产生间距【解决办法同内联元素一样】
5、子元素是内联元素，父元素可以用text-aliign属性设置子元素的对齐方式

块级元素并排显示

块级元素的并排显示在前端页面书写过程中也是应用非常多，我们常见的各种新闻页面、购物平台页面等等内容都是并排显示。

常用操作如下：

• 浮动：float: left/right，在布局中应用很广泛，可以很好的使块级元素达到并排显示的效果；
• flex：flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间，本人对于这个属性很少用；
• 定位：position属性属于css中相对较难掌握的一个属性，包含相对定位与绝对定位；
• 行内块

---

美化

美化中所使用的设置都是属于css中一些最基本最简单的设置，字体设置、文本设置、列表设置、表格设置。

字体设置

字体的属性设置主要包含以下几个方面：

• font-style: 设置字体是否倾斜 属性值有 normal 正常体； italic 斜体；
• font-size: 设置字体大小 最小是12px
• font-weight: 设置字体的粗细程度 属性值有 normal 正常体；bold 加粗；bolder 更粗；100 200 300
• font-family: 设置字体类型
• font: 上面几个属性的复合属性 font:font-style font-weight font-size/line-height，
  font-family font-style font-weight 可以不写 也可以交换位置，font-size/line-height font-family 必须写 能交换位置

文本设置

文本的属性设置主要包含以下几个方面：

• text-decoration: 用来设置文本的装饰线 underline 下划线，overline 上划线，none 不添加任何装饰线，line-through 删除线；一般情况下用于a标签，hover时添加上下划线
• text-indent: 首行空格，2em 首行空两格
• text-align: 设置文本的对齐方式，center 居中使用较多

列表设置

列表可以进进行小范围的内容排列，有有序列表、无序列表、定义列表三种样式，这部分内容属于html基础知识，相对较简单，比较容易灵活运用。

表格设置

表格一般占用空间较大，使用较少，因为现在对于页面的布局方面都使用块级元素来划分。同样这部分内容也是属于html基础知识。

---

盒子模型的设置

只要一个盒子被选中，就要考虑它的属性问题，思考这个盒子需要设置哪些属性，然后考虑是否需要并排显示，最后再考虑美化问题。

1. 内容区域：width 和 height
2. 内填充区域： padding
3. 边框： border
4. 外填充区域：margin
5. 背景： background

一张网页就是一堆的盒子堆积起来的。盒子就是标签，都是矩形。

内容区域：width 和 height

对于块元素形成的盒子来说，表示内容区域，
对于内联元素形成的盒子来说，width和height不起作用；

注意：
    1）不设置有默认值，宽度默认值是auto，对于块级元素来说，auto表示尽可能大，对于行内元素来说，auto表示尽可能小。
    2）不设置高度，男盒子的高度是内容的高度，也就是说高度是由内容撑起来的，对于女盒子来说，也是由内容撑起来的，但是和font-size也有关系。
    3）宽度和高度可以设置百分比，是父元素的百分比的，一般情况下在移动端开发时用的多一点。

边框：border

• 边框的粗细 border-width

• 边框的样式 border-style

• 边框的颜色 border-color
  一般情况下，不会单独设置，所以border也是一个复合属性；

    注意：
    1）border: 1px solid red;  
    border后面的属性是没有顺序的，但是一般都是先写border-width，然后是border-style，最后是border-color；
    2）粗细大部分情况下单位都是px，你也可以使用单词，使用单词时，在不同的浏览器下代表粗细是不一样的；
    3）边框的样式也非常多，用的非常多的有这几个：solid 实线， dotted 点画线， dashed 虚线， none 没有线； 
    4）边框的颜色设置  单词  用的最多还是16进制  也可以使用rgb函数
    5）也可以单独设置某一个方向上的border，例如border-top:1px solid red; 用的也比较多
  

内填充区域： padding

用来设置内填充，也叫补白：表示内容区域和边框之间的距离。
padding后面也可以跟一个值、二个值、三个值、四个值：

• 一个值：padding: 10px; 四个方向的padding都是10px
• 二个值：padding: 10px 20px; 上下10px 左右20px
• 三个值：padding: 10px 20px 30px; 上10px 左右20px 下30px
• 四个值：padding: 10px 20px 30px 40px; 上10px 右20px 下30px 左40px

四个方向的补白使用量也是挺大的

• padding-top: ;

• padding-right: ;

• padding-bottom: ;

• padding-left: ;

    注意：
    1）有些标签是有默认的padding  如ul  ol... 等  一刀切  *{ padding:0; }
    2）对于行内元素来说，padding在垂直方向上不影响行高，效果上看似是有padding，但是padding不是真正的padding，或者说对于一个女盒子来说，padding在垂直方向上无效。
    3）对于块级元素来说，上下padding可以撑起男盒子的高度。
  

外填充区域：margin

表示外边距，盒子与盒子之间的距离，是边框之外的间隔，是在border之外的
margin后面也可以跟一个值、二个值、三个值、四个值：

• 一个值：margin: 10px; 四个方向的padding都是10px
• 二个值：margin: 10px 20px; 上下10px 左右20px
• 三个值：margin: 10px 20px 30px; 上10px 左右20px 下30px
• 四个值：margin: 10px 20px 30px 40px; 上10px 右20px 下30px 左40px

四个方向：

• margin-top: ;

• margin-right: ;

• margin-bottom: ;

• margin-left: ;

    注意：
    1）有此标签有默认的margin  一刀切  *{ margin:0; padding:0; }
    2）对于行内元素来说，margin在垂直方向上是无效的 
    3）margin可以设置auto。 表示尽可以大  div{ margin:0 auto; }
    4）margin可以设置负值  
    5）对于块级元素来说，margin有重叠问题（塌陷问题）
  

---

塌陷问题

对于块级元素来说，margin有重叠问题（塌陷问题）：

1. 兄弟元素之间的重叠问题
2. 父子元素之间的重叠问题

兄弟元素之间的重叠问题：

<div class="box7">box7</div>
<div class="box8">box8</div>
.box7{ 
    width: 200px;
    height: 200px;
    background-color: gold; 
    margin-bottom: 150px;
}
.box8{ 
    width: 200px;
    height: 200px;
    background-color: skyblue; 
    margin-top: 100px;
}

按理说：两个盒子之间的margin应该是250px
实现是：就150px 

这种现象叫：margin的塌陷  

margin塌陷的前提：1）块元素  2）垂直方向    

margin到底是多少：取大原则

解决办法：设置一个盒子的margin

父子元素之间的重叠问题:

<div class="box9">
<p class="box10">我是一个段落</p>
</div>    
.box9{ 
    background-color: pink;
    margin-top: 50px;
}
.box9 .box10{
    background-color: gold;
    margin-top: 30px;
}

按理说：p标签上面的应该有80px的margin 
实现是：只有50px margin 
这种现象叫：父子元素之间的margin重叠

解决办法：
    1）给父元素加border 
    2）给父元素加padding

学习心得

CSS内容相对较为琐碎，所以需要在运用的过程中加强记忆,在练习中加强知识的深度。同时也掌握了各种截图工具、测量工具的使用。