CSS学习笔记2

目录

一、页面布局整体思路

二、盒子模型

1.盒子模型

2.边框border

3.表格的细线边框border-collapse

4.边框会影响盒子实际大小

5.内边距padding

6.外边距margin

7、水平布局

8、垂直布局

9、外边距的折叠

10、浏览器默认样式

11、盒子大小box-sizing

12、轮廓阴影和圆角

①轮廓outline

②阴影box-shadow

③圆角border-radius

三、浮动

1、浮动(float)

2、浮动特点

3、高度塌陷和BFC

4、clear

5、after伪类解决高度塌陷(最完美方案)

6、before伪类解决外边距重叠

7、clearfix(是一个类,用时直接加)

四、定位(position)

1、相对定位(relative)

2、绝对定位(absolute)

Ⅰ、特点:

Ⅱ、包含块(containing block)

Ⅲ、绝对定位元素位置

Ⅳ、子绝父相

3、固定定位(fixed)

4、粘滞定位(sticky)

5、元素层级(z-index)

6、一些小技巧

Ⅰ、固定定位在版心右侧

Ⅱ、绝对定位盒子居中

7、其他特性

8、定位总结


一、页面布局整体思路

①确认可视区(版心)

②确定行模块及其中的列模块

③一行中的列模块常浮动布局,确定每列大小之后确定位置

④html结构遵循先有结构 后有样式原则

一些总结

①垂直块级盒子显示用标准流布局

②多个块级盒子水平显示用浮动布局

③元素自由在某盒子内移动用定位布局

二、盒子模型

1.盒子模型

封装周围的HTML元素,包括:边框,外边距,内边距,实际内容
border边框  content内容  padding内边距  margin外边距
width、height设置的都是内容区

2.边框border

border可设置元素边框宽度(粗细px),样式,颜色
border:border-width | | border-style | | border-color;
样式  solid实线边框   dashed虚线边框  dotted点线边框  hidden隐藏边框
简写方式:border:1px solid red;没有先后顺序
只修改上边框border-top:1px solid pink;
bottom下边框  

3.表格的细线边框border-collapse

border-collapse控制浏览器绘制表格边框的方式,控制相邻单元格的边框
border-collapse:collapse;
相邻边框合并在一起

4.边框会影响盒子实际大小

边框会额外增加盒子大小
盒子已经有了宽度和高度,再指定内边框会撑大盒子
不指定宽度/高度,盒子不会撑开

5.内边距padding

内容和边框的距离padding-left/right/top/bottom
简写:
padding:5px;(上下左右都是5px)
padding:5px 10px;(上下5px左右10px)
padding:5px 10px 20px;(上5px左右10px下20px)
padding:5px 10px 20px 30px;(上5右10下20左30顺时针)

※border-width,style,padding都是
四个值:上 右 下 左
三个值:上 左右 下
两个值:上下 左右
一个值:上下左右

6.外边距margin

控制盒子和盒子之间的距离
margin-left/right/top/bottom
简写方式和padding一样

7、水平布局

——元素在其父元素中水平方向的位置由margin-left、border-left、padding-left、width、padding-right、border-right、margin-right共同决定。
——必须满足margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=父元素内容区宽度
——若等式不成立(过度约束),等式会自动调整
调整情况:
①若七个值没有auto,浏览器会自动调整margin-right值以使等式成立。
②width、margin-left、margin-right可设置auto,若某值为auto则会自动调整auto的值以使等式成立。
③若一个宽度和一个外边距设为auto,则宽度会调整到最大,设置为auto的外边距自动为0。
④若三个值都auto,则外边距0,宽度最大。
⑤若两外边距auto,宽度固定,则会将外边距设为相同的值(平分)【利用此实现水平居中】
eg.    width:xxxpx;
         margin:0 auto;

8、垂直布局

——默认情况下父元素高度被内容撑开
——子元素在父元素内容区中排列
如果子元素大小超出父元素,则子元素会从父元素中溢出
给父元素使用overflow属性处理溢出
overflow-x,overflow-y,处理单方向
可选值:
visible 默认值 子元素会从父元素中溢出,在父元素外部位置显示
hidden 溢出内容将会被裁剪不会显示(对文字不友好)
scroll 生成两个滚动条,通过滚动条查看完整内容
auto 根据需要生成滚动条

9、外边距的折叠

——相邻的垂直方向外边距会发生重叠现象
——兄弟元素
      兄弟元素间的相邻垂直外边距取两者之间较大值
      特殊情况:相邻外边距一正一负则取两者和
                      相邻外边距都负则取绝对值大的
      兄弟元素外边距重叠对开发有利不需要处理
——父子元素
    父子元素间的相邻外边距,子元素的会传递给父元素(上外边距)
    父子外边距折叠会影响页面布局,需要处理
    处理方法:①可用padding-top调小盒子位置【需减height】
        ②可给大盒子加border(-top)将两个外边距隔开【需减height和小盒子margin】
        ③开启BFC/clearfix/before伪类

10、浏览器默认样式

去除浏览器默认样式(PC端页面)
默认有外边距,去除用
*{
  margin: 0;
  padding:0;
}
或者把重置样式表拖进去,在<head>里title下最上面加
<link rel=“stylesheet” href=“./css/reset.css”>(直接去除浏览器默认样式)或
<link rel=“stylesheet” href=“./css/normalize.css”>(对默认样式进行统一)

<ul>默认小黑点,去除用list-style:none;(去除项目符号)

11、盒子大小box-sizing

默认情况下,盒子可见框大小由内容区、内边距、边框共同决定
box-sizing用来设置盒子尺寸计算方式(设置width、height作用)
可选值:
content-box默认值,宽度高度用来设置内容区大小。                盒子大小=width+padding+border
border-box设置整个盒子可见框大小(内容区、内边距、边框之和)                盒子大小=width

12、轮廓阴影和圆角

①轮廓outline

outline 设置元素轮廓,用法和border一样(轮廓不影响可见框大小)

②阴影box-shadow

box-shadow 设置元素阴影效果(阴影不影响页面布局)
写法:box-shadow:10px 10px 10px black;
第一个值:水平偏移量,正值向右负值向左
第二个值:垂直偏移量,正值向下负值向上
第三个值:阴影模糊半径
第四个值:阴影颜色,一般用rgba,最后一个透明值

③圆角border-radius

border-radius
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
用法
border-top-left-radius:50px;(半径为50的圆角)
border-top-left-radius:50px 100px;(水平50半径垂直100半径)
border-radius:50px;(四个角都是50半径)
border-radius:10px 20px 30px 40px;
(四个值:左上  右上  右下  左下
   三个值:左上  右上左下  右下
   两个值:左上右下  右上左下)
border-radius:50%;(圆形) 

三、浮动

1、浮动(float)

可选值:
none默认值,不浮动
left 元素向左浮动
right元素向右浮动
注:元素设置浮动后,水平布局不需要强制成立等式
【想并排排列,可以每个div都设置float】

2、浮动特点

Ⅰ、
①完全脱离文档流,不占据文档流位置元素下的还在文档流中的元素会自动向上移
②浮动可使一个元素向其父元素左侧或右侧移动
③浮动元素默认不会从父元素中移出
④浮动元素向左或向右移动时不会超过它前边的其他浮动元素
⑤如果浮动元素上边是一个没有浮动的块元素,则浮动元素无法上移
⑥浮动元素不会超过它上边浮动的兄弟元素,最多和他一样高
Ⅱ、
①浮动元素不会盖住文字,文字会自动环绕在浮动元素周围(可利用此设置文字环绕图片的效果)
②浮动后元素特点会变化,脱离文档流的特点:
1>块元素:
块元素不在独占一行
宽度高度默认被内容撑开
2>行内元素
变成块元素,特点和块元素一样

【脱离文档流后不再区分块和行内】

3、高度塌陷和BFC

高度塌陷:浮动布局中,父元素高度默认被子元素撑开,当子元素浮动后,其会完全脱离文档流,无法撑起父元素高度,导致父元素高度丢失。

BFC:Block Formatting Content 块级格式化环境,css中隐含属性,开启BFC该元素会变成一个独立布局区域。

开启BFC后元素特点:
①开启BFC的元素不会被浮动元素所覆盖
②开启BFC的元素子元素和父元素外边距不会重叠
③开启BFC的元素可包含浮动的子元素【不会塌陷】

通过特殊方式开启BFC:
①设置元素浮动(不推荐,副作用大)
②将元素设置为行内块元素(不推荐,副作用大)
③将元素overflow设置为一个非visible的值(一般hidden)

4、clear

①如果我们不希望某个元素因为其他元素浮动的影响而改变位置,可以通过clear清除浮动元素对当前元素所产生的影响。
②作用:清除浮动元素对当前元素所产生的影响
③可选值:
left清除左侧浮动元素对当前元素的影响
right清除右侧浮动元素对当前元素的影响
both清除两侧中最大影响的那侧
④原理:浏览器自动为元素添加一个上外边距以使其位置不受其他元素影响

5、after伪类解决高度塌陷(最完美方案)

①可以在box1框内多加子元素box3(clear:both)【因为是表现上的问题和结构没关,所以一般不用】
②给会塌陷的box1加样式.box1::after{content:'';display:block;clear:both;}
(after伪类是行内元素所以需要转换块元素)

6、before伪类解决外边距重叠

给box1(父)加.box1::before{content=''; display=table;}
原理:将父子用空内容隔开

7、clearfix(是一个类,用时直接加)

clearfix可同时解决高度塌陷和外边距重叠的问题,当你遇到这些问题时,直接用这个类就行。
.clearfix::before,
.clearfix::after{
    content:'';
    dislay:table;
    clear:both;
}

<div class="box1 clearfix">
    <div class="box2"></div>
</div>
 

四、定位(position)

定位是更高级的布局手段,通过定位可将元素摆到页面任意位置
可选值:
static 默认值,元素是静止的没有开启定位
relative 开启元素的相对定位
absolute  开启元素的绝对定位
fixed 开启元素的固定定位
sticky 开启元素的粘滞定位

偏移量(offset)
元素开启定位以后,可以通过偏移量来设置元素位置
top  定位元素和定位位置上边的距离(越大越向下)
bottom  定位元素和定位位置下边的距离(越大越向上)
left  定位元素和定位位置左边的距离(越大越靠右)
right  定位元素和定位位置右边的距离(越大越靠左)

1、相对定位(relative)

特点:
①元素开启相对定位后,如果不设置偏移量元素不会发生任何变化
②参照于元素在文档流中位置进行定位(原来位置)
③相对定位会提升元素的层级(会盖住其他元素)
④相对定位不会使元素脱离文档流、性质即块.行内.行内块

2、绝对定位(absolute)

Ⅰ、特点:

①开启绝对定位后,如果不设置偏移量元素位置不会发生变化
②元素会从文档流中脱离
③绝对定位会改变元素性质,行内变成块,块的宽高被内容撑开
④绝对定位会使元素提升一个层级
⑤绝对定位相对于其包含块进行定位

Ⅱ、包含块(containing block)

——正常情况下:包含块是离当前元素最近的祖先块元素
——绝对定位下:包含块是离它最近的 开启了定位的祖先元素,如果所有元素都没开启定位则根元素就是它的包含块(html根元素、初始包含块、浏览器)

Ⅲ、绝对定位元素位置

绝对定位
水平方向布局等式左边多加left、right,规则还一样。
left、right也能设auto
垂直方向布局等式左边多加top、bottom

Ⅳ、子绝父相

父级需要占位置所以用相对定位,子盒子不占位置且要在父盒子内移动故用绝对定位。

3、固定定位(fixed)

固定定位也是一种绝对定位,特点大部分和绝对定位一样
不同的是固定定位永远参照于浏览器视口进行定位

4、粘滞定位(sticky)

和相对定位特点基本一致,不同的是粘滞定位可以在元素到达某个位置时将其固定
【兼容性不好】
top值写多少就相当于在那抹了胶

5、元素层级(z-index)

需要一个整数作为参数,值越大层级越高,元素层级越高越优先显示。
如果元素层级一样,优先显示靠下的元素。
祖先的元素层级再高也不会盖住后代元素。

6、一些小技巧

Ⅰ、固定定位在版心右侧

position:fixed;
left:50%;                        //视口一半位置
margin-left:600px;         //版心盒子的一半(以上)位置

Ⅱ、绝对定位盒子居中

position:absolute;
left:50%;                        //视口一半位置
margin-left:-100px;          //向左盒子一半
top:50%;                            
margin-top:-100px;

7、其他特性

①行内元素添加绝对或固定,可直接设置宽高

②块元素添加绝对或固定,不给宽高则默认内容大小

③脱标的盒子(浮动、绝对、固定)不会外边距塌陷

④绝对定位、固定定位会压住标准流所有内容,浮动不会压住标准流的文字、图片,只会压住盒子。

8、定位总结

定位模式是否脱标移动位置是否常用
静态定位(static)不能边偏移
相对定位(relative)否(占位)相对自身位置移动
绝对定位(absolute)是(不占位)相对带有定位的父级
固定定位(fixed)是(不占位)浏览器视口
粘性定位(sticky)否(占位)浏览器视口
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值