CSS_03 | 易学教程

五.框模型

2.外边距的特殊效果

①外边距合并

两个垂直外边距相遇时，他们将合并成一个。值以最大的为准。

②关于块级元素，行内元素，行内块的外边距总结

行内元素的特点：

设置宽高无效，宽高根据内容自动撑开

上下垂直外边距无效。可以与其他的行内元素和行内块元素共用一行

块级元素特点：

设置宽高有效。如果不设置宽高，高按内容撑开，宽占父元素宽度的100%。上下外边距有效，独占一行.

行内块的特点：input

设置宽高有效，不设置宽高，自带默认宽高。

上下外边距有效，但是同一行修改一个行内块的垂直外边距，整行都会跟着一起改变位置。可以与其他行内元素和行内块共用一行

③自带外边距的元素

body h1~h6 p ol ul dl pre

由于不同浏览器对默认的外边距解析可能有差别

所以一般情况下，开发之前，需要把内外边距清空

*{margin:0;padding:0}

或者通过群组选择器来写

blockquote,body,button,dd,dl,dt,fieldset,form,

h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,

p,pre,td,textarea,th,ul{margin:0;padding:0}

④外边距溢出

在特殊情况下，为子元素设置外边距，会作用到父元素上

特殊情况：

1.父元素没有上边框

2.子元素内容区域上边与父元素内容区域上边重合的时候

(为父元素中第一个子元素设置上外边距时，这种说法不严谨)

解决方案：

1.给父元素添加上边框，弊端，影响父元素实际占地高度

2.给父元素添加上内边距，弊端，影响父元素实际占地高度

3.给父元素的一个子元素的位置添加空table元素

3.内边距

内边距的改变效果，感觉是改变了元素的大小

不会影响其它元素，但是真正改变的是本元素的占地尺寸

内边距颜色和元素背景相同

语法：

padding:v1; 设置4个方向的内边距

padding:v1 v2; 上下左右

padding无auto

padding:v1 v2 v3; 上左右下

padding:v1 v2 v3 v4;上右下左

单方向设置

padding-top

padding-right

padding-bottom

padding-left

取值，以px为单位的数字 %

padding无auto值

4.box-sizing属性(设置元素实际占地尺寸的公式)

box-sizing:

取值：1.content-box.默认值，按照之前的盒子模型计算元素占地大小(左外+左边+左内+内容区域宽度+右内+右边+右外)

2.border-box。设置的width和height是包含border+padding+内容区域的整体宽高

元素实际占地大小

左外+设置的width+右外

上外+设置的height+下外

给复杂元素关系做布局时，经常使用border-box

六.背景

1.背景颜色

">2.背景图片

background-image:url(08.png);

使用背景图片，可以让该元素的子元素，堆叠显示在背景图片上。

而使用img标签，默认不会有堆叠效果

3.背景图片的平铺

background-repeat:

取值：repeat 默认值，平铺

no-repeat 不平铺

repeat-x 水平方向平铺

repeat-y 垂直方向平铺

4.背景图片的定位

background-position:

取值：1. x y 以px为单位的数字

2.x% y% 百分比

3.关键字 x:left/center/right

y:top/center/bottom

5.背景图片的尺寸

background-size:

取值：1. x y 以px为单位设置具体宽高

2.x% y% 按父元素宽高比设置

以元素的角度考虑这两个单词

3.cover 充满，只要求元素被背景图充满，背景图显示不全，也没关系.

4.contain 包含，只要求元素要把背景图整个包含住，元素有空白，也没关系

6.背景图片的固定

background-attachment

取值： scroll 默认值，背景图会随着窗口滚动条滚动

fixed 固定，背景图相对于窗口固定，窗口滚动时，背景图位置不变，但是只会在原容器内显示

7.背景的简写方式

background:

取值 color image repeat attachment position

最精简方式 background:color/image;

七.渐变 gradient

1.什么是渐变

渐变是指多种颜色，平缓变化的一种显示效果

2.渐变的主要因素

色标：一种颜色，以及这种颜色出现的位置

一个渐变，最少两个色标

3.渐变的分类

1.线性渐变，以直线的方式，来填充渐变色

2.径向渐变，以圆形的方式，来填充渐变色

3.重复渐变，将线性，径向渐变重复几次显示

4.线性渐变

background-image:
linear-gradient(angle,color-point1, color-point2......);

angle:表示渐变的方向

取值 1.关键字 to top 从下往上

to right 从左往右

to bottom 从上往下

to left 从右往左

2.角度 0deg to top

90deg to right

180deg to bottom

270deg to left

可以取负值

color-point:色标颜色 %/px

5.径向渐变

background-image:

radial-gradient(半径 at 圆心x 圆心y,color-point1,

color-point2.................)

半径以px为单位的数字

圆心 1 x y 以px为单位的数字

2. x% y%

3关键字 x left/center/right

y top/center/bottom

color-point: 位置取值 1. % 半径的百分比%

2.px为单位的数字，半径失效

6.重复渐变

重复的线性渐变

background-image:

repeating-linear-gradient(to left,#000 0px,

#ff0 25px,#000 50px);

重复的径向渐变

background-image:

repeating-radial-gradient(50px at center center,

#000 0%,#0ff 25%,#000 50%);

7.浏览器兼容问题

如果有低版本(ie8.0以下)，想要使用渐变

chrome/safari -webkit-

firefox -moz-

opera -o-

IE -ms-

要低版本兼容渐变，需要在linear-gradient之前添加浏览器内核

background-image:

-webkit-linear-gradient()

background-image:

-moz-linear-gradient()

......

兼容低版本浏览器，线性渐变的方向，要改变写法

不写to top/to left/to bottom/to right

改成初始点 top/left/bottom/right

八.文本格式化(重点********)

1.字体属性

①指定字号大小

font-size:

取值 px/pt/rem/em为单位的数字

②字体的类型

font-family

一个页面中，编写css的思路

从上往下，从左往右，从外往里

1.尺寸，大体位置

2.边框，背景相关

3.文本相关

4.微调

来源：https://www.cnblogs.com/luwei0915/p/12287434.html

标签

background

padding