基础学习4 盒模型

最新推荐文章于 2021-12-07 16:53:15 发布

aZF1997

最新推荐文章于 2021-12-07 16:53:15 发布

阅读量437

点赞数

CC 4.0 BY-SA版权

分类专栏：学习文章标签：笔记

本文链接：https://blog.youkuaiyun.com/aZF1997/article/details/97245414

学习专栏收录该内容

45 篇文章

订阅专栏

本文介绍了CSS的基础知识，重点讲解了盒模型，包括盒模型的构成、宽高计算，以及边框、内边距和外边距的设置。讨论了在布局中如何利用盒模型实现元素的定位，特别是解决父子嵌套时外边距塌陷的问题。同时，提到了通过CSS实现图片效果以减少请求，提高网页加载速度。

选择器:

*  0  >  标签选择器  1 > class类选择器 10  >  id选择器 100

父子关系  子代  E > F { }   后代  E  F   
兄弟关系  相邻  E + F { }   兄弟  E ~ F {}
交集   div.a  p#s    并集  .a ,.b,.c{}

a:link  a:visited  a:hover  a:active

a {
    color:#555; 灰色
    text-decoration:none;
}
a:hover {
    color:blue; 灰色
    text-decoration:underline;  
}

font: font-style  font-weight  font-size/1.5  font-family;


font-style:Italic /normal
font-weight: 100 - 900 400正常 700粗 900最粗
font-family:"Micosoft YaHei","宋体",Arial,sans-serif;
line-height:height;文字垂直居中 一行文本 
text-decoration:水平居中

day04

字体缩进属性

text-indent: 20px/2em/2rem;
em:相对于父元素字体大小的参考单位
rem:相对于html根标签的参考单位

text-indent:-999px;  隐藏文本的另外做法

css三大特性

层叠性 ,继承性,优先级

继承性: text- ,line-height,font-,color

字体颜色

color: 
(1)屌丝程序员表示法  red,blue,yellow 
(2)标准程序员表示法  color:#6位16进制  #234567; 两位位一组
16进制  16个数  0-9 A-F  10 A  11 B  F 15
23 红色  45绿色  67蓝色  #333333====>#333 #000黑色  #fff白色
(3)文艺程序员 color:rgb(0-255 ,0-255 ,0-255 ) red green blue

color:rgb(234,23,12)

元素的分类以及展示属性

div,span, p,hi,img,a,em.i,strong,b,u,ins,del,s ul li ,ol li dl,dt dd table td th tr

大致三大类

行内元素: em,i,strong,b,a,span

1: 宽高完全取决于内容人为设置不起作用

2: 并排超出父元素宽度时自动折行

3:具有文本特性

块级元素:div,p,hi,ul,li,ol,li ,dl dd,form

1:默认宽度100% 取决于内容的高度

2:我们可以设置宽高 ,独成一行霸道

行内块元素: img ,input

1:宽高设置起作用

2:并排放置

3:文本特性

[外链图片转存失败(img-J3wdHGmZ-1564023613444)(C:\Users\Administrator\Desktop\第一阶段\day04\笔记\media\元素的转换.png)]

布局的第一大块核心 -->盒模型

[外链图片转存失败(img-nWEhPWGz-1564023613446)(C:\Users\Administrator\Desktop\第一阶段\day04\笔记\media\盒模型示意.jpg)]

[外链图片转存失败(img-sY0bV0u3-1564023613447)(C:\Users\Administrator\Desktop\第一阶段\day04\笔记\media\盒模型案例.jpg)]

盒模型的宽 = width+padding-left+padding-right +border-left+border-right + margin-left+margin-right

盒模型的高度 = height+padding-top +padding-bottom +border-border-top+bottom+margin-top+margin-bottom

[外链图片转存失败(img-u1BpQZ1E-1564023613448)(C:\Users\Administrator\Desktop\第一阶段\day04\笔记\media\盒模型.png)]

边框 border

border:
(1)边宽 border-width: 1px 2em 3rem 
(2)边型 border-style: solid 实线 / dashed虚线/dotted小圆点 / double双实线
(3)边色  border-color: red #345678 rgb(0-255,0-255,0-255)

边框增加后盒模型宽度要增大,如果要保证盒模型宽度不变,只能内减width

应用:三角形

[外链图片转存失败(img-dMb5ozXj-1564023613448)(C:\Users\Administrator\Desktop\第一阶段\day04\笔记\media\三角形.png)]

网页如果图片过多怎样? —> 请求次数多—>加载速度变慢—>用户体验就变差

We Can use css代码实现图片效果尽可能

 .box {
        width: 0px;
        height: 0px;
        border-width: 100px 100px 100px 100px;
        border-style: solid;
        /* background: #000; */
        /* transparent 取底色  */
        border-color: transparent transparent palegreen transparent;
    }

内边距 padding

调整内容与边框的距离===> 内边距可以撑大盒子 —>内减width - 新增的内边距部分

外边距margin

1: 设置盒子与盒子之间的距离

2: 调整的自己位置 margin-left ,margin-top 可以为负值

水平居中: margin:0 auto;

[外链图片转存失败(img-Tvv2wPJk-1564023613449)(C:\Users\Administrator\Desktop\第一阶段\day04\笔记\media\课堂案例.png)]

现象: 子元素设置上外边距父盒子一起向下移动???

正常排版下 ,父盒子和子元素在垂直方向上的外间距会互相干扰 ,一起移动,====>

外边距塌陷现象只发生在垂直方向

1: 父子嵌套时

现象:当子元素设置上外边距时,父盒子会和子元素一并向下移动

[外链图片转存失败(img-LpOuPWGf-1564023613449)(C:\Users\Administrator\Desktop\第一阶段\day04\笔记\media\外边距塌陷02.png)]

解决方案:

1: 给父元素设置1px上外边框或者1px上内边距(分割公共区域)

2: 既然默认渲染导致外边距塌陷就要使用浏览器的一个规则去改变默认渲染.

规则:BFC (块级格式化上下文) 私人领域

BFC规则不是浏览器的默认规则,所以我们得触发BFC规则

overflow:hidden —>可以触发BFC规则

2:盒子垂直上下放置时

[外链图片转存失败(img-oTAxRmv5-1564023613450)(C:\Users\Administrator\Desktop\第一阶段\day04\笔记\media\外边距塌陷问题01.png)]

解决: 不要解决,要避免!!!

背景属性

插入图片的另外一种方式

background:背景的颜色    背景图片路径  背景是否平铺  背景的位置   背景是否附着attachment(是否随着滚动条动) ;
background-color:rgb ,#123456,red
background-image: url(./image/beijing.png)
background-repeat: no-repeat/repeat默认/repeat-x/repeat-y;
background-position: xpx ypx      70%   60%  px/% ;
background-attachment: fixed固定 不动/scroll卷曲  随着滚动条动

scroll : 位置参考点是父元素左上角
fixed : 位置参考点变成body左上角