资讯专栏INFORMATION COLUMN

css随堂笔记(三)

focusj / 2848人阅读

摘要:随堂笔记三关于背景图片设置背景图片图片的路径背景图片位置方位名词背景位置如果只设置一个方位词,另外一个默认居中如果设置的值是两个方位词,与顺序无关数值背景位置如果设置的值是数字一个值得时候,表示水平方向的位移,垂直方向默认居中两个值得

Css随堂笔记(三)

1 关于背景图片

 

A 设置背景图片:background-image:url(“图片的路径”);

 

B 背景图片位置: background-position:1 方位名词 背景位置:   

                                                                               1.如果只设置一个方位词,另外一个默认居中

                                                                               2.如果设置的值是两个方位词,与顺序无关

                                                                  2 数值:背景位置:

                      1.如果设置的值是数字:

                                                                                                     1.一个值得时候,表示水平方向的位移,垂直方向默认居中

                                                                                                     2.两个值得时候,第一个表示水平位移 第二个表示垂直方向的位移

 

C 背景图片是否平铺:background-repeat:1 no-repeat 背景图片不平铺

                                                                       2 repeat-x x轴平铺

                                                                       3 repeat-y y轴平铺

 

D背景附着:background-attachment:1 scroll(默认值。滚动)2 fixed(背景固定)

 

E 背景透明:rgba(n,n,n,m)n的取值:0-255; m的取值:0-1 a:代表的是alhpa

 

F 背景简写:background:url(“”) no-repeat position; 注意:背景简写的时候,background-image一定要有,其他可选,而且与顺序无关

 

2 盒子模型

 

A 页面布局的本质:就是摆放盒子模型

 

B 盒子模型的组成

                            1.content:内容

                            2.padding:内边距 padding的值: 一个值:表示上右下左都是这内边距

两个值:第一个表示上下内边距,第二个表示左右内边距

三个值:第一个表示上内边距,第二个表示左右内边距,第三个表示下内边距

四个值:分别表示上 右 下 左

                            3.border:边框

                            4.margin:外边距 margin的值:    一个值:表示上右下左都是这外边距

两个值:第一个表示上下外边距,第二个表示左右外边距

三个值:第一个表示上外边距,第二个表示左右外边距,第三个表示下外边距

四个值:分别表示上 右 下 左

                                  Margin’塌陷:垂直塌陷和包含垂直塌陷{

                                                                              1 垂直塌陷,没有解决方案,布局的时候尽可能去避免

                                                                              2 包含垂直塌陷     1  给父盒子添加个border

                                                                                                       2 给父盒子加overflow:hidden  触发了bfc  推荐使用

}

C 盒子模型的居中:margin: 0 auto;垂直方向加auto没有作用

 

D 影响盒子模型大小的因素: 1 padding

                                                2 border

计算盒子的大小: 盒子的真实宽度 = width + 左右padding + 左右border

盒子的真实高度 = height + 上下padding + 上下border

 

E 盒子阴影:box-shadow:h-shadow(水平阴影位置) v-shadow(垂直阴影位置) blur(模糊距离) spread(阴影大小) color(阴影颜色) outset(外阴影 默认) inset(内阴影)

      注意:水平位置和垂直位置一定要写。。。盒子阴影默认是外阴影,不需要设置outset。设置反而是错误的

 

 

3 浮动

 

A 页面布局的三大机制:1 普通流,标准流  2 浮动  3 定位

 

B 浮动

  1 设置了浮动属性的元素会脱离标准流的控制

        2 浮动最初的目的:文字环绕图片

        3 浮动的特点:浮动的特点:

           1.脱标,不占原来的位置

           2.浮动的元素以顶部对齐

           3.浮动能改变元素的显示方式(呈现出行内块元素的特点)

           4.如果有包含关系,子元素浮动,不会跑出父元素,而且不占据父元素中的paddjing和border的位置

5.如果浮动的元素前面是标准流,那么浮动的元素跟在标准流的下面,如果浮动的元素前面也是浮动的元素。那么他们在一行显示(宽度要足够

 

C 清除浮动:1 清除浮动指的是清除浮动带来的影响

                2 清除浮动的方式:

                                  1.给父盒子加overflow:hidden

                                  2.使用额外标签法,在有浮动后面添加一个没有样式的空盒子,然后给clear属性(不建议)

                                  3.使用伪元素清除浮动(强烈推荐使用

Ps:伪元素:::before   ::after

 

伪元素清除浮动.clearfix::after{

                                  content:"

                                  clear:both;  清除浮动

                                  display:block;  一定要块元素才能清除浮动,所以我们将伪元素转为块级元素

                                  visibility:hidden;  为了隐藏content中的.

                                  height:0;  为了消除content中的.撑出来的高度

                                  line-height: 0; 为了浏览器的兼容

                                  }

 

                 .clearfix {

                                 *zoom: 1;为了兼容IE6-7

}

为了解决低版本浏览器兼容问题,最起码都得加个点进去

 

双为元素清除浮动:.clearfix::before,.clearfix::after {

                                             content:";

                                             display: table

                                       }

.clearfix::after {

                                  clear:both

}

.clearfix {

                                  *zoom: 1;

                                  }

D 关于常见的三种布局方式:  1 版心布局 版心:宽度占页面的一半,在浏览器中居中显示

                                               2 通栏布局 宽度和浏览器一样,高度不到页面一半

                                                  3 3.分栏布局(左右分栏)

 

 

4 定位

 

A 定位:定位=定位方式(定位模式) + 偏移量(边偏移),将盒子定位在某方位

      偏移量:偏移量:元素在页面移动的水平距离和垂直距离

       偏移量的表示:  top:

left:

right:

bottom:

top和left的级别比bottom和right高

 

B 定位模式:

 

1 静态定位 html标准流中的元素的定位模式就是静态定位

                             静态定位特点:1.不能设置有效偏移量,所以静态定位的元素遵循标准流

 

2 相对定位 相对定位:position:relative

                             特点:

1.元素不脱标。在占标准流中的位置

2.相对定位不能改变元素的显示方式

3.相对定位移动的是参照元素本身在标准流中的位置

3 绝对定位‘ 绝对定位:position:absolute;

                 特点:绝对定位要设置宽高,不然就没有宽高了

1.脱标,不占标准流中的位置

2.改变元素的显示方式

3.如果有包含关系,子元素绝对定位,父辈元素中所以的元素都是静态定位的元素,那么这个绝对定位的元素位置参照浏览器做位置移动,

4.如果父辈元素中有非静态定位的元素,那么这个绝对定位的元素参照这个非静态定位的父辈元素做位置的移动,如果父辈元素有多个非静态定位的元素,那么这个绝对定位元素参照离自身最近的父辈元素做位置的移动(就近元素)

4 固定定位 position:fixed;

                 特点:

1.固定定位的元素脱标,不占位置

2.能改变元素的显示方式

3.固定定位的元素始终都是参照浏览器的位置移动,与父辈元素的定位方式无关  

 

C 定位的布局方式:子绝父相的定位布局方式:子元素绝对定位,父元素相对定位

 

D 元素的层级: z-index:" (0-无限)

                                       z-index层级只对非静态定位的元素有效;

对于非静态定位的元素,后面的元素的层级比前面的元素的层级高

费静态定位的元素的层级高静态定位的元素,如果非静态定位的元素不设置层级,默认是0

 

position:relative(定位都行)

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/1883.html

相关文章

  • 《Python web开发》笔记 : CSS基础

    摘要:计算方式一个行内样式,一个,一个属性选择器或者伪类,一个元素名,或者伪元素。其他规则见拓展阅读。绝对定位设置了绝对定位之后,元素脱离文档流,其他的元素会调整位置来弥补它偏离后剩下的空隙。 CSS常用选择器 - 通配符选择器 * - id选择器(id #) - 类选择器(class .) - 元素选择器(E) - 后代选择器(E F) - 子元素选择器(E>F) - 相邻...

    Scorpion 评论0 收藏0
  • 《Python web开发》笔记 : CSS基础

    摘要:计算方式一个行内样式,一个,一个属性选择器或者伪类,一个元素名,或者伪元素。其他规则见拓展阅读。绝对定位设置了绝对定位之后,元素脱离文档流,其他的元素会调整位置来弥补它偏离后剩下的空隙。 CSS常用选择器 - 通配符选择器 * - id选择器(id #) - 类选择器(class .) - 元素选择器(E) - 后代选择器(E F) - 子元素选择器(E>F) - 相邻...

    qylost 评论0 收藏0
  • 重学前端学习笔记(十)--浏览器工作解析(

    摘要:三操作过程首先,须把规则进行处理。后代选择器空格后代选择器的作用范围是父节点的所有子节点,因此规则是在匹配到本标签的结束标签时回退。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专栏学习【原文有winter的语音】,如有侵权请联系我,...

    trigkit4 评论0 收藏0
  • 重学前端学习笔记(十)--浏览器工作解析(

    摘要:三操作过程首先,须把规则进行处理。后代选择器空格后代选择器的作用范围是父节点的所有子节点,因此规则是在匹配到本标签的结束标签时回退。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专栏学习【原文有winter的语音】,如有侵权请联系我,...

    yintaolaowanzi 评论0 收藏0
  • 重学前端学习笔记(十)--浏览器工作解析(

    摘要:三操作过程首先,须把规则进行处理。后代选择器空格后代选择器的作用范围是父节点的所有子节点,因此规则是在匹配到本标签的结束标签时回退。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专栏学习【原文有winter的语音】,如有侵权请联系我,...

    KitorinZero 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<