Web前端开发学习笔记05--CSS

css-盒子模型

1、盒子模型组成

所谓的盒子模型，就是把HTML页面中的布局元素看做是一个矩形的盒子，也就是一个盛装内容的容器。CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容（content）。

1.1边框（border）

1.1.1 border 可以设置元素边框

边框组成：宽度、样式、颜色

语法：

border: border-width | border-style | border-color

属性	作用
border-width	定义边框粗细，单位为px
border-style	边框样式，常用solid（实线）、dashed（虚线）、dotted（点线）、none
border-color	边框颜色

1. 边框的复合写法：

border:  border-width border-style border-color /*没有顺序*/

如：

border: 5px solid pink;

2. 边框的分开写法：

border-top: 5px solid pink;     /*只设定上边框，其余同理*/

1.1.2 表格的细线边框

border-collapse 属性控制浏览器绘制表格边框的方式，它控制相邻单元格的边框。

语法：

border-collapse: collapse;

注意：

• collapse 是合并的意思
• border-collapse: collapse; 表示相邻边框合并在一起

1.1.3 边框会影响盒子的实际大小

因为边框会影响盒子的实际大小，所以用两种方案解决：

1. 测量盒子大小时不量边框
2. 如果测量时包含了边框，则需要width/height 减去边框宽度

1.2 内边距（padding）

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

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

padding 复合（简写）属性

可以有1~4个值：

值的个数	表达意思
padding: 5px;	1个值，代表上下左右都有5个像素内边距
padding: 5px 10px;	2个值，代表上下内边距是5像素，左右内边距是10像素
padding: 5px 10px 20px;	3个值，代表上内边距是5像素，左右内边距是10像素，下内边距是20像素
padding: 5px 10px 20px 30px;	4个值，代表上、右、下、左内边距分别为5像素、10像素、20像素、30像素

padding 会影响盒子的实际大小

问题：

• 如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子

解决方案：

1. 如果保证盒子跟效果图大小保持一致，则让width/height 减去多出来的内边距大小
2. 不指定盒子本身的width/height 属性，则此时padding 不会撑开盒子大小

padding 的巧妙运用

例如，导航栏里的字数不一样多，可以不用设置盒子的宽度，直接使用padding最合理（盒子间的距离相等）

1.3 外边距（margin）

margin 属性用于设置外边距，即控制盒子与盒子之间的距离。

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

外边距的经典应用

（1）外边距可以让（块级元素）盒子水平居中，但必须有前提条件：

1. 盒子必须指定宽度
2. 盒子左右的外边距都设置为auto

例如：

.header {
    width: 80px;
    margin: 0 auto;
}

常见写法：

• margin-left: auto; margin-right: auto;
• margin: auto;
• margin: 0 auto;

（2）外边距可以让行内元素和行内块元素居中

行内元素或行内块元素给其父元素添加 text-align: center即可

外边距合并-嵌套元素塌陷

（1）外边距合并

当两个块级元素相遇时，例如上下两个相邻的块元素相遇，上元素有margin-bottom，下元素有margin-top，合并时他们之间的垂直距离取的值是margin-bottom 和margin-top 之间较大的那个值

（2）嵌套块元素垂直外边距的塌陷

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

嵌套关系如：

  <div class="father">
        <div class="son"></div>
  </div>

解决方案：

• 可以为父元素定义上边框
• 可以为父元素定义上内边距
• 可以为父元素添加 overflow: hidden
• 浮动、固定

1.4 清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致，因此我们在布局时首先要清除内外边距

语法：

* {
   padding: 0;
   margin: 0;
}

注意：

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

1.5 去掉 li 前面的项目符号

语法：

list-style: none;

2、PS基本操作

1. Ctrl + R：打开标尺，或视图→标尺
2. 右击标尺，将单位改为像素
3. Ctrl + 加号/减号：放大/缩小视图
4. 按住空格键，可使用鼠标拖动视图
5. 用选区拖动，测量大小
6. Ctrl + D 取消选区

3、圆角边框

border-radius 属性用于设置元素的外边框圆角

语法：

border-radius: length;

• 参数值可以为数值或百分比形式
• 如果正方形想设置为一个圆形，则把参数设为高度或的一半，也可以直接写50%
• 如果是一个矩形，设置为高度的一半就可以
• 可以为四个值，分别为：左上角、右上角、右下角、左下角

4、盒子阴影

box-shadow 属性给盒子添加阴影

语法：

box-shadow: h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值
blur	可选，模糊距离
spread	可选，阴影的尺寸
color	阴影的颜色
inset	可选，将外部阴影（outset）改为内部阴影，outset为默认值

5、文字阴影

text-shadow 属性将阴影应用于文本

语法：

text-shadow: h-shadow v-shadow blur color;

值	描述
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值
blur	可选，模糊距离
color	阴影的颜色