重温css（2）|青训营笔记

hasmokan
128 阅读8分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天

盒子模型

box-sizing 属性可以被用来调整这些表现：

content-box（不包含margin）

  • 是默认值。如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。

border-box （包含margin）用的多！

  • 告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减去 (border + padding) 的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。

overflow 因为盒子模型固定所以设置overflow

visiable

hidden

scroll

语法

box-sizing 属性被指定为下面列表中的关键字。

属性值

  • content-box 外部

    默认值，标准盒子模型。width 与 height 只包括内容的宽和高，不包括边框（border），内边距（padding），外边距（margin）。注意：内边距、边框和外边距都在这个盒子的外部。比如说，.box {width: 350px; border: 10px solid black;} 在浏览器中的渲染的实际宽度将是 370px。尺寸计算公式：width = 内容的宽度height = 内容的高度宽度和高度的计算值都不包含内容的边框（border）和内边距（padding）。

  • border-box 包含

    width 和 height 属性包括内容，内边距和边框，但不包括外边距。这是当文档处于 Quirks 模式 时 Internet Explorer 使用的盒模型。注意，填充和边框将在盒子内 , 例如， .box {width: 350px; border: 10px solid black;} 导致在浏览器中呈现的宽度为 350px 的盒子。内容框不能为负，并且被分配到 0，使得不可能使用 border-box 使元素消失。尺寸计算公式：width = border + padding + 内容的宽度height = border + padding + 内容的高度

示例

本例显示了不同的 box-sizing 值如何改变两个原本相同的元素的渲染尺寸。

HTML

<div class="content-box">Content box</div>
<br>
<div class="border-box">Border box</div>

CSS

div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}

.content-box {
  box-sizing: content-box;
  /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
     Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
     Content box width: 160px
     Content box height: 80px */
}

.border-box {
  box-sizing: border-box;
  /* Total width: 160px
     Total height: 80px
     Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
     Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
}

Result

继承

初始值

CSS中，每个属性都有一个初始值

background-color的初始值为transparent 
margin-left的初始值为О

可以使用initial关键字显式重置为初始值
background-color: initial

显示继承

*{
	box-sizing: inherit;
}
html{
	box-sizing: border-box; 
}
.some-widget{
	box-sizing: content-box;
}

image-20230117154645090

image-20230117154711297

height

image-20230117154851779

height:100% 必须得父级有元素

border

三种属性四个方向

image-20230117155023149

margin

使用margin：auto水平居中

margin:auto 

div{
	margin-left:auto;
	margin-right:auto;
}

margin collapse 边距合并与折叠（只会取上下的最大值）

.a{
	margin-bottom: 100px
}
.b{
	margin-top:150px
}
最后会使用margin 最高的

image-20230117155348277

行级元素 块级元素

image-20230117160024186

image-20230117160001362

行级排版上下文（IFC） div中全是行级元素

image-20230117162027899

块级排版上下文（BFC）

image-20230117162455787

image-20230117162549918

display

image-20230117160059962

flex

（CSS Flexbox适用场景 - Web前端工程师面试题讲解_哔哩哔哩_bilibili）

flex box 属性

image-20230117162902604

主轴与侧轴

image-20230117163049199

justify-content

image-20230117163115745

align-items

image-20230117163220023

Flexbility 弹力

image-20230117163322688

image-20230117163332515

flex缩写

image-20230117163513633

Grid

image-20230117163539531

Grid 与 Flex 区别

划分网格

image-20230117163709587

grid line 网格线

image-20230117163756166

image-20230117164100795

网格线快捷写法 1133是黄色的区域 行起始 列起始 行结束 列结束

image-20230117163941455

float

环绕文字

image-20230117164246115

position

image-20230117164322597

ralative

image-20230117164349024

absolute

image-20230117164425940

也是通过 top left right bottom 来设置的  相对于根元素定位

fixed (相对于窗口)

sticky 滚动到一定程序就吸附在上面

##默认有边距的元素

HTML元素margin、padding的默认值

elementmargin(单位像素)padding的默认值
html00
body80
h1 ~ h6有0
p16 0 16 00
ul16 0 16 00 0 0 40
li00
td01
dl16 0 16 00
dt0 0 0 400
body,h1,h2,h3,h4,h5,h6,p,ul,dl,dd{
	margin:0;
	padding:0
}

以下那几个标签默认有padding 值（）

  • body

  • div

  • form

  • img

没有正确答案

A C D有margin 没有padding

垂直居中

image-20230106125918324

##border-radius

border-radius:100% 效果 等于 border-radius：50%；

但是动画会有所不同

image-20230105230814940

​ 不使用border创建阴影

圣杯布局和双飞燕布局

​ CSS圣杯布局和双飞翼布局 - Web前端工程师面试题讲解_哔哩哔哩_bilibili

em和rem

  • rem （root）em 与html的根的font-size有关

  • em 与父元素的 font-size有关 首先与自己的有关

  • em先查询自己是否有font-size 如果没有在查询父元素

常见的盒子垂直居中的方法有哪些请举例 3 种？

1. 利用子绝父相定位的方式来实现

#container {
  width: 500px;
  height: 500px;
  position: relative;
}
#center {
  width: 100px;
  hight: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
}

2. 利用 Css3 的 transform，可以轻松的在未知元素的高宽的情况下实现元素的垂直居中。

#container {
  position: relative;
}
#center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

3. flex

#container {
  display: flex;
  justify-content: center;
  align-items: center;
}
#center {
}

清除浮动的方法有哪些？

为什么要清除浮动，因为浮动的盒子脱离标准流，如果父盒子没有设置高度的话，下面的盒子就会撑上 来。

1.额外标签法（在最后一个浮动标签后，新加一个标签，给其设置 clear：both；）（不推荐）

2.父级添加 overflow 属性（父元素添加 overflow:hidden）（不推荐）

3.使用 after 伪元素清除浮动（推荐使用）

.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
  content: "";
  display: block;
  height: 0;
  clear:both;
  visibility: hidden;
}
.clearfix{
  *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
｝
复制代码

4.使用 before 和 after 双伪元素清除浮动

.clearfix:after,
.clearfix:before {
  content: '';
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}
avatar
文章
阅读
粉丝