标签：盒子 margin 元素 基础 边框 HTML border 选择器 CSS

2022.2.28 学习笔记

CSS第二趴：

四、 CSS的背景

5.背景图片固定         background-attachmnet：scroll /fixed； 背景图片相对于内容滚动(默认) / 背景图片固定

6.背景复合写法         当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为： background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置；这是实际开发中，我们更提倡的写法。

7.背景颜色半透明        background: rgba(0, 0, 0, 0.3) ；最后一个参数是 alpha 透明度，取值范围在 0~1之间；我们习惯把 0.3 的 0 省略掉，写为 background: rgba(0, 0, 0, .3);；注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响。

CSS第三趴：

一、CSS三大特性

1.层叠性        相同选择器给设置相同的样式，此时后一个样式就会覆盖（层叠）前一个冲突的样式，层叠性主要解决样式冲突的问题。层叠性原则：样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式；样式不冲突，不会层叠。(长江后浪推前浪。前浪死在沙滩上)

2.继承性        标签会继承父标签的某些样式，如文本颜色和字号 。子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）。

 行高的继承性        body { font:12px/1.5   "微软雅黑"；}

行高可以跟单位也可以不跟单位。如果子元素没有设置行高，则会继承父元素的行高为 1.5。此时子元素的行高是：当前子元素的文字大小 * 1.5 。body 行高 1.5，这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高。

3. 优先级        选择器相同，则执行层叠性；选择器不同，则根据选择器权重执行。

优先级注意点:  1. 权重是有4组数字组成,但是不会有进位。 2. 可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器,以此类推.. 3. 等级判断从左向右，如果某一位数值相同，则判断下一位数值。 4. 可以简单记忆法: 通配符和继承权重为0，标签选择器为1，类(伪类)选择器为 10， id选择器 100，行内样式表为 1000， !important 无穷大。5. 继承的权重是0 ， 如果该元素直接选中，不管父元素权重多高，子元素得到的权重都是 0，优先执行选出的样式。

权重叠加： 如果是复合选择器，则会有权重叠加，需要计算权重。

div ul li ------> 0,0,0,3        .nav ul li ------> 0,0,1,2        a:hover -----> 0,0,1,1        . nav a ------> 0,0,1,1

tips：涉及复合选择器就考虑权重叠加，没涉及复合选择器就考虑继承权重为0。

CSS第四趴：

一、CSS盒子模型

 1.盒子模型（Box Model）组成

2. 边框（border）

语法： border : border-width / border-style / border-color；   例border: 1px solid red；

边框有三部分组成；边框宽度(粗细)、边框样式、边框颜色。边框样式 border-style 可以设置如下值：none ： 没有边框即忽略所有边框的宽度（默认值）。 solid ： 边框为单实线(最为常用的) 。dashed ： 边框为虚线。dotted ： 边框为点线。

border-collapse: collapse；表示相邻边框合并在一起。

边框会额外增加盒子的实际大小。 两种方案解决: 1. 测量盒子大小的时候，不量边框。2. 如果测量的时候包含了边框，则需要 width/height 减去边框宽度。

3.内边距（padding）

padding 属性用于设置内边距，即边框与内容之间的距离。

当我们给盒子指定 padding 值之后，内容和边框有了距离，添加了内边距。同时padding影响了盒子实际大小。 也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。 解决方案： 如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可。

4. 外边距（margin)

margin 属性用于设置外边距，即控制盒子和盒子之间的距离。 margin 简写方式代表的意义跟 padding 完全一致。

5.外边距典型应用：

注意： 以下方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。

 外边距可以让块级盒子水平居中 ， 但是必须满足两个条件： ① 盒子必须指定了宽度（width）。 ② 盒子左右的外边距都设置为 auto 。

常见的写法，以下三种都可以：①margin-left: auto；margin-right: auto；②margin: auto；③margin: 0 auto；

6.外边距合并

使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。

主要有两种情况: ①相邻块元素垂直外边距的合并。

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom ，下面的元素有 上外边距 margin-top ， 则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。 取两个值中的较大者这种现象被称为 相邻块元素垂直外边距的合并 。

 解决方案： 尽量只给一个盒子添加 margin 值。

②嵌套块元素垂直外边距的塌陷。

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

 解决方案： ① 可以为父元素定义上边框。 ② 可以为父元素定义上内边距。 ③ 可以为父元素添加 overflow:hidden；(常用)。

7.清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。 因此我们在布局前，首先要清除下网页元素的内外边距。<ul>标签有一个默认的padding。

* { 
    padding:0;     /* 清除内边距 */ 
    margin:0;     /* 清除外边距 */ 
}

 注意： 行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以设置。

二、圆角边框(重点)        border-radius:length；

在 CSS3 中 ， 新增了圆角边框样式，这样我们的盒子就可以变圆角。 border-radius 属性用于设置元素的外边框圆角。 参数值可以为数值或百分比的形式。如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%。该属性是一个简写属性，可以跟四个值，分别代表左上角、 右上角、 右下角、 左下角，分开写：border-top-left-radius、 border-top-right-radius、 border-bottom-right-radius 和 border-bottom-left-radius（left和top的顺序不能颠倒）。

三、盒子阴影(重点)

语法： box-shadow: h-shadow  v-shadow  blur  spread  color  inset；

常用：box-shadow:10px  10px  10px  -4px  rgba(0,0,0,0.3)；

注意 ： 1. 默认的是外阴影(outset), 但是不可以写这个单词,否则造成阴影无效。 2.盒子阴影不占用空间，不会影响其他盒子排列。

四、文字阴影(了解)

语法： text-shadow: h-shadow  v-shadow  blur  color；

 CSS第五趴：

一、CSS浮动

 传统网页布局的三种方式：普通流（标准流）、浮动 、定位

1.标准流（普通流/文档流）就是标签按照规定好默认方式排列。

• 块级元素会独占一行，从上向下顺序排列。 常用元素：div、 hr、 p、 h1~h6、 ul、 ol、 dl、 form、 table。
• 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。常用元素：span、 a、 i 、 em 等。

 2.浮动 （ float)

浮动最典型的应用：可以让多个块级元素一行内排列显示。

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。即先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。

网页布局第二准侧.：先设置盒子的大小, 之后再设置盒子的位置。

float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。 语法： 选择器 { float: 属性值 ; }

设置了浮动的元素最重要特性： ①脱离标准普通流的控制移动到指定位置（俗称脱标） ②浮动的盒子不再保留原先的位置。

 

③如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。

 注意： 浮动的元素是互相贴靠在一起的（不会有缝隙） ， 如果父级宽度装不下这些浮动的盒子， 多出的盒子 会另起一行对齐。

④浮动元素会具有行内块元素特性。任何元素都可以浮动。 不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性：如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定；浮动的盒子中间是没有缝隙的，是紧挨着一起的(行内元素同理)。

标签：盒子,margin,元素,基础,边框,HTML,border,选择器,CSS
来源： https://blog.csdn.net/weixin_46041137/article/details/123174330

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。