听阳光的猫

道阻且长、望你如一

0%

HTML和CSS的知识点

发表于 更新于 分类于
本文字数： 2.5k 阅读时长 ≈ 2 分钟

2020/9/4 Fri D5

整理前期学习中掌握的不够牢的HTML和CSS知识点。

一、 块级元素 ：高度由内容决定

​ 行内非替换元素元素：不能设置宽高

image-20200324202229217

二、清除浮动的方法

image-20200327193949253

三、水平居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//1.普通的文本
    text-align: center;

//2.行内元素
    text-align: center;

//3.图片: 行内替换元素
    text-align: center;

//4.inline-block的居中
    text-align: center;

//5.block的居中
    margin: 0 auto;

四、相对定位水平居中

1
2
3
4
5
6
position: relative;
//1.向左移动img的一半
transform: translate(-50%);

//2.向右移动父元素(.box)的一半
margin-left: 50%;

五、margin的传递(左右不会传递)

  1. margin-top传递

    如果块级元素的顶部线和父元素的顶部线重叠

    那么这个块级元素的margin-top值会传递给父元素

  2. margin-bottom传递

    如果块级元素的底部线和父元素的底部线重叠，并且父元素的高度是auto

    那么这个块级元素的margin-bottom值会传递给父元素

  • 如何防止出现传递问题？
    1. 给父元素设置padding-top\padding-bottom
    2. 给父元素设置border
    3. 触发BFC( block format context): 设置overflow为auto/hidden
  • 建议
    1. margin一般是用来设置兄弟元素之间的间距
    2. padding一般是用来设置父子元素之间的间距

六、margin的折叠(左右不会折叠)

​ 垂直方向上相邻的2个margin（margin-top、margin-bottom）有可能会合并为1个margin

​ 这种现象叫做collapse（折叠）

  • 折叠后最终值的计算规则:两个值进行比较，取较大的值
  • 如何防止margin collapse？只设置其中一个元素的margin

2020/9/5 Sat D6

一、a中的img使得a居中的方式

vertical-align:middle;

二、倒三角的实现方式

1
2
3
4
5
6
7
8
1.border-top: 4px solid #999;
  border-right: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px solid transparent;

2.border-width: 4px;
  border-style: solid;
	border-color: #999 transparent transparent;

三、动画效果：绕自己中心旋转

1
2
transition: all 300ms ease-in;
transform-origin: center 2px;

四、a元素设置了background之后设置background-color无法层叠

五、 添加伪元素作为图片的时候

1
2
3
4
5
content: "";
width: 20px;
height: 20px;
display: inline-block;
background-image

2020/9/6 Sun D7

今天把考拉海购的网站布局完成，到明天一整天复盘代码如何运行实现效果。

下周任务将js部分代码加入，得到一个的完整网站。

一、a元素float之后类似于块级元素可以设置宽度高度

image-20200907000105137

二、设置层叠样式时，区分是否有重复元素出现

2020/9/15 Tue D16

深入解析CSS里面写到了flex布局的一些建议事项，觉得还挺不错的。

一、用rem设置字号，用px设置边框，用em设置其他大部分的属性

二、使用calc()定义字号

1
2
3
4
/*.5em保证了最小字号，1vw确保字体会随视口缩放*/
:root {
    font-size:calc(0.5em + 1vw)
}

三、自定义属性：可以更快的的更改类似颜色的值

1
2
3
4
5
6
7
8
9
10
11
/*使用：root定义一个自定义属性
  调用var()使用该变量*/
:root {
	--main-font:Helvetica,Arial,sans-serif;
	--brand-color:#369;
}

p {
	font-family:var(--main-font);
	color:var(--brand-color，blue);//var()接受第二个参数作为备用值
}

四、防止外边距折叠

  • 对容器使用overflow:auto(或者非visible的值)，防止内部元素的外边距跟容器外部的外边距折叠。
  • 在两个外边距之间加上边框或者内边距，防止它们折叠。
  • 如果容器为浮动元素、内联块、绝对定位或者固定定位时，外边距不会在它外面折叠。
  • 当使用flex布局时，弹性布局内的元素之间不会发生外边距折叠。
  • 当元素显示为table-cell时不具备外边框属性，因此他们不会折叠。此外还有table-row和大部分其他表格显示格式类型，但不包括table 、table-inline、table-caption.

五、猫头鹰选择器：全局设置上下堆叠的元素间距

1
2
3
body * + * {
    margin-top:1.5em;
}

六、网页的基础样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*全局box-sizing设置*/
：root {
    box-sizing:border-box;
}

*,
::before,
::after {
    box-sizing:inherit;
}
/*全局外边距*/
body * + * {
    margin-top:1.5em;
}

七、flex布局实现两侧分别对齐，使用外边距

1
2
3
4
5
6
7
.site-nav > li + li {
    margin-left: 1.5em;
}

.site-nav >.nav-right {
    margin-left:auto;
}