CSS学习总结与心得体会

2024-01-03 04:08| 来源: 网络整理| 查看: 265

CSS的学习总结与心得体会

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

布局盒子模型块级元素并排显示盒子模型

盒子模型是对页面进行布局所需要使用的非常重要的一部分。盒子模型本质上就是一个盒子，它包括边距（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: 设置字体大小最小是12pxfont-weight: 设置字体的粗细程度属性值有 normal 正常体；bold 加粗；bolder 更粗；100 200 300font-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基础知识。

盒子模型的设置

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

内容区域：width 和 height内填充区域： padding边框： border外填充区域：margin背景： 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有重叠问题（塌陷问题）：

兄弟元素之间的重叠问题父子元素之间的重叠问题兄弟元素之间的重叠问题： box7 box8 .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 父子元素之间的重叠问题: 我是一个段落 .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内容相对较为琐碎，所以需要在运用的过程中加强记忆,在练习中加强知识的深度。同时也掌握了各种截图工具、测量工具的使用。

【本文地址】

公司简介

联系我们