css笔记（二）

admin管理员组

文章数量:1794759

css笔记（二）

笔记基于尚硅谷 菜鸟教程

目录

1. 文档流

2.盒子模型

2.1简介

2.2 边框

2.3盒子的内边距

2.4盒子的外边距

2.5盒子在水平方向的布局

2.6盒子在垂直方向的布局

2.7外边距的折叠

2.8行内元素的盒模型

2.9浏览器的默认样式

2.10盒子的大小

2.11盒子的阴影轮廓和圆角

---

1. 文档流

我们认为网页是一个多层结构，是一层一层的 可以通过css为每一次设置样式 用户只能看到最上面的一层 我们称最下面的一层叫文档流，文档流是网页的基础 我们创建的元素默认是在文档流中进行排列 对于我们来说元素主要有两种状态 在文档流中 不在文档流中元素在文档流中的特点：块元素 -在页面中会独占一行 默认宽度是占满父元素 默认高度是被子元素撑开行内元素 不会独占页面的一行，值占自身大小 自左向右排列 和书写习惯一致 行内元素默认的高度和宽度都是被内容撑开

2.盒子模型 2.1简介

CSS将页面全部元素设置为了一个矩形的盒子 将元素设置为矩形的盒子之后，对网页的布局就变成了对不同盒子放在不同的位置 每一个盒子都有以下几个部分 内容区(content) 内边距(padding) 边框(border) 外边距(margin) 内容区的设置，大小和高度默认设置的是内容区属性

边框和内边距的设置会将盒子撑开

2.2 边框

边框的3个样式设置

• 边框的颜色 border-width
• 边框的宽度 border-color
• 边框的样式 border-style

边框的宽度

默认值一般是 3px

border-width可以用来指定四个方向边框的宽度

四个值 上 右 下 左

三给值 上 左右 下

两个值 上下  左右

一个值 上下左右

除border-width还有一组border-xxx-width

xxx可以是top right bottom left

用来单独指定某一个边的宽度

边框的颜色

border-color用来指定边框的颜色，同样可以分别指定四个边的边框

规则和border-width一样

边框的样式

border-style指定边框的样式

solid 表示实线

dotted  点状虚线

deshed 点状实线

double  双线

示例

border-style: double; 2.3盒子的内边距

• 内容区和边框之间的距离是内边距
• 一共有四个方向的内边距

         padding-top

         ....

• 内边距设置会影响盒子的大小
• 背景颜色会延伸到内边距上
• 盒子大小由内容区，边框，内边距共同决定

         所以计算盒子大小时，需要将这三个区域加在一起计算

padding  内边距的简写属性 可以分别指定四个方向的内边距

规则与border-width相同

2.4盒子的外边距

• 外边距不影响可见框的大小
• 外边距会影响盒子的位置
• 一共有四个外边距

         用法和border-width相同

• 元素会尽量的自左向右顺序排列，在默认情况下如果我们设置左上的边距会影响自己，右下会影响别人
• 也可以设置负值，但是元素会向左上移动
• margin不会影响元素的可见框的大小，但是会影响盒子的实际大小

2.5盒子在水平方向的布局

元素在父元素的位置由以下属性决定

              margin-left               border-left               padding-left               width               padding-right               border-right               margin-right 一个元素在他的父元素中 子元素的margin-left+border-left+padding-left+width+padding-right+border-right=父元素宽度(必须满足)

等式不成立的时候，我们称他为过度约束，这个时候我们会自动调整

如果7个值中没有auto会先调整margin-right 这7个值中有三个可以设置为auto width (默认是auto) margin-left margin-right

• 如果某一个值为auto就会先自动调整那个值
• 如果一个宽度和一个外边距是auto，那么宽度会调整到最大，设置为auto的外边距会自动为0
• 如果三个都是auto，那么宽度会是最大
• 如果外边距都是auto，那么两个auto会赋相同的值(常用这个特点实现水平居中)

使一个元素在其父元素中水平居中水平居中

示例：

width: xxxpx; margin: 0 auto; 2.6盒子在垂直方向的布局

在未给父元素设置高度时，盒子的高度默认的父元素高度被子元素撑开

子元素在内容区中排列

如果给父元素设置了高度，子元素的大小超过父元素则子元素会从父元素中溢出 使用overflow属性来设置父元素如何处理溢出的子元素 可选值：

• visible：(默认值)子元素从父元素中溢出，在父元素的外部显示
• hidden:溢出的元素将会被裁减而不显示
• scroll:生成两个滚动条，通过两个滚动条实现浏览
• auto：根据需要生成两个滚动条

2.7外边距的折叠

相邻的垂直方向的外边距会发生折叠现象

——相邻元素垂直外边距之间会发生重叠

兄弟元素

兄弟元素之间相邻垂直外边距会取较大值 特殊情况 如果两个一正一负取和 如果两个都是负数取绝对值较大的

兄弟元素之间外边距折叠，对于开发是有利的，所以我们不需要进行处理父子元素

父子元素之间的外边距子元素会传递给父元素（上外边距） 父子外边距折叠会对页面造成影响，所以必须进行处理

2.8行内元素的盒模型

• width,height不支持设置宽度和高度
• 行内元素可以设置padding   垂直方向不会影响布局
• 行内元素可以设置boarder   垂直方向不会影响布局
• 行内元素可以设置margin    垂直方向不会影响布局

行内元素不折叠，只相加display 用来设置元素显示的类型

• inline 设置为行内元素
• blockn 行内转换块元素
• inline-block   行内块  既可以设置宽度又不会独占一行,类似于替换元素
• table   将元素设置为一个表格
• none  元素不在页面中显示（什么都没了）

visiblility 用来设置元素的显示状态

• visible 默认值 元素在页面中正常显示
• hidden 元素在页面隐藏不显示，但是依然占据页面中的位置

2.9浏览器的默认样式

通常情况下浏览器会为一些元素设置一些默认样式

默认样式的存在会影响到页面的布局

通常情况下编写页面时必须要去除浏览器的默认样式

重置样式表有两个（百度搜索）

• reset.css 去除了所有的css样式
• normalize.css 是将css样式进行了统一但不去除

或者

*{ padding: 0; margin: 0; } 2.10盒子的大小

默认情况下盒子的可见框大小是由内容区，内边距，边框共同确定的

box-size 可以设置盒子的计算方式，设置width，height的作用域，可选值：

• content-box 默认值，使用宽度高度设置内容区的大小
• border-box 宽和高用来设定整个盒子可见区的大小

2.11盒子的阴影轮廓和圆角

outline 用来设置元素的轮廓线，用法和boarder一样，但是轮廓不影响页面的布局

boxs-shadow用来设置元素的阴影效果，不影响页面布局

• 第一个参数 水平偏移量 设置阴影的水平位置 正值向右移动 负值向左移动
• 第二个参数 垂直偏移量 设置阴影的水平位置 正值向下移动 负值向上移动
• 第三个参数是影印的模糊半径
• 第四个是影印的颜色

示例

.box1 { width: 200px; height: 100px; box-shadow: 10px 10px 50px rgba(0, 0, 0, 0.3); background-color: yellow }

圆角边框 在css中定义：border-radius:length; length:表示为画圆的半径大小; 也就是说这样定义： border-radius:10px; 10是代表你圆角的弧度。越大越明显！！！ 当然也可以用百分比来表示：比如： border-radius:10%;

如果想设置为一个圆形的，那么我们直接设置为盒子的一半， 比如我们盒子是一个正方形，高度为100px;宽度为100px; 那我们可以这样设置 border-radius:50px;或者border-radius:50%; length:高度一半/宽度一半！

圆角矩形 如果是一个矩形，那我们设置为高度的一半就可以了。

当然我们也可以一个一个设置 border-radius:10px 20px 30px 40px; 这样设置，我们是从左上角开始设置，然后顺时针进行设置，每一个数值都是对应角的弧度。

如果要单独设置其中一个的话，我们就这样写：

• 左上角：border-top-left-radius:10px;
• 右上角：border-top-right-radius:10px;
• 左下角：border-bottom-left-radius:10px;
• 右下角：border-bottom-right-radius:10px;

本文标签： 笔记css