CSS学习笔记

Posted 2022-03-19 小炒肉-- Welcome

1.关于盒子的大小

默认情况下,盒子可见框的大小由内容区.内边框和边框共同决定

box-sizing用来设置盒子尺寸的计算方式(设置width和height的作用)

content-box:宽高用来设置内容区的大小

border-box:宽度和高度用来设置盒子可见框的大小

会自动调整内容区的空间(边框边距不变)以适应设置的可见框大小

2.轮廓阴影和圆角

(1.)轮廓: outline用来设置轮廓线和border用法一样,

与border不同的是outline不会影响布局,虽然也会使可见框变大,但会覆盖其他元素,不会挤掉其他元素.

(2.)阴影:box-shadow,默认为当前盒子大小,会被盖住,所以需要偏移量使其显示

如box-shadow:10px 10px black(颜色);

第一个值设置水平偏移量,正值向右移动;

第二个值设置垂直偏移量,正值向下移动;

第三个值设置模糊半径,越大越模糊

第四个值设置阴影颜色(RGB可以顺带设置透明);

四个值都不能省略

(3.)圆角:border-radious

border-top-radious之类...可以单独设置四个角的样式

例如border-top-left-radious:xxpx xxpx;

如果是一个值会把水平垂直半径都设置为xxpx然后画一个圆;

如果设置两个值第一个设置水平半径,第二个设置垂直方向半径,如果两个值不一样,会设置出椭圆效果;

border-radious:... .... ...;

四个值 左上.右上.右下.左下

三个值 左上 右上左下 右下

两个值 左上右下 右上左下

如果是设置border-radious:50%,那么它就会变成一个圆形

3.浮动可以使一个元素向其父元素的左侧或者右侧移动

使用float属性来设置元素的浮动

可选值:

none默认值,元素不浮动

left元素向左浮动

right严肃向右浮动

注意:a.设置float属性后,水平布局的等式便不需要强制成立;

b.设置浮动后便会从文档流中脱离,不再占用文档的位置

c.所以元素下边的还在文档流中的元素会自动向上

d.浮动元素默认不会从父元素中移出,即父元素是它的边界

e.浮动元素不会盖住其他的浮动元素,不会超过它前边的其他浮动元素

f.浮动元素上面是非浮动元素,则无法上移

g.浮动元素无法超过它浮动的兄弟元素,最多一样高

4.浮动的特点

(1)浮动元素不会盖住文字,文字会环绕在浮动元素周围,形成文字环绕效果

(2)元素脱离文档流后会发生一些现象

a.块元素:不再独占一行,宽度和高度都被内容撑开

b.行内元素:可以手动设置宽高,默认宽高被内容撑开

总结;块元素和行内元素脱离文档流后都变成了一种类型的元素.

它默认宽高被内容撑开,不独占一行,但可以手动设置宽高,与行内块元素相似.

5.简单的布局

头部标签header,主体标签main(只能有一个main标签),底部footer

6.高度塌陷和BFC

高度塌陷:当父元素没有设置固定宽高时而且子元素设置浮动后(此时父元素默认高度由子元素撑开),会脱离文档流造成父元素的高度丢失.

高度塌陷后下面的元素自动上移,影响页面布局,所以需要进行处理

这时可以用BFC(块级格式化环境):

BFC的特点:(1.)开启BFC的元素不会被浮动元素所覆盖

(2.)开启BFC的元素子元素和父元素的外边距不会重叠

(3.)被设置BFC的元素可以在不固定高度的情况下包裹住浮动的子元素

开启BFC的方式有很多,但各有各的缺点

最推荐的是设置overflow:auto或者hiddden;

7.