2022-04-21 0 88 web前端社区
通过上面的介绍我们知道,通过 border-*-radius 系列函数能够分别为元素的四个角设置圆角效果,函数的语法格式如下:
border-*-radius:[
语法的含义为,需要为 border-*-radius 属性提供 1~2 个参数,参数之间使用空格进行分隔。其中第一个参数表示圆角水平方向的半径或半轴,第二个参数表示圆角垂直方向的半径或半轴,如果省略第二个参数,那么该参数将直接沿用第一个参数的值。
使用四个 border-*-radius 属性为元素设置圆角效果:
.one {
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;
background-color: #CCC;
margin-bottom: 10px;
}
border-radius 属性是 border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius 四个属性的简写形式,使用 border-radius 可以同时设置四个 border-*-radius 属性。border-radius 属性的格式如下:
border-radius:[
语法说明如下:
/
进行分隔,每组参数都允许设置 1~4 个参数值,其中第一组参数代表圆角水平方向上的半径或半轴,第二组参数代表圆角垂直方向上的半径或半轴,如果省略第二组参数的值,那么该组参数将直接沿用第一组参数的值。
.test2 .four {
border-radius: 10px 20px 30px 40px/5px 10px 15px 20px;
}
vertical-align 属性用来定义元素内文本的垂直对齐方式:
值 | 描述 |
---|---|
baseline | 默认值,将元素的基线与父元素的基线对齐 |
sub | 下标对齐,将元素的基线相对于父元素的基线降低 |
super | 上标对齐,将元素的基线相对于父元素的基线升高 |
top | 顶部对齐,将元素行内框的顶端与行框的顶端对齐 |
text-top | 文本顶部对齐,把元素的顶端与父元素字体的顶端对齐 |
middle | 居中对齐,通常使用在图片上,将图片垂直方向的中线与文本的中线(文字元素行内框的中线)对齐 |
bottom | 底部对齐,将元素行内框的顶端与行框的底端对齐 |
text-bottom | 文本底部对齐,是将元素行内框的底端与行框的底线对齐 |
length | 以数字加单位的形式设置元素基线距离父元素基线的距离(可以为负值) |
% | 使用 “line-height” 属性的百分比值来排列此元素,允许使用负值 |
inherit | 从父元素继承 vertical-align 属性的值 |
上表中提到了基线、底线、顶线、中线等概念,它们到底指什么呢
有这样一个疑问,为什么img是行内元素,但是它还可以设置宽高?是因为img是典型的置换元素
没有实际的内容,只是一个空元素 ,
1.置换元素的内容不受css约束,它拥有默认的宽度和高度,比如button在页面有默认的大小,input框有默认的大小。而span标签是没有这个属性的。
2.浏览器根据元素的标签和属性,来决定元素的具体显示内容,是可替换的元素
1.有内容,是不可改变的,里面显示什么内容,浏览器就渲染显示什么内容。
在页面的设计中,当我们没有为一个div块级元素设置宽度和高度的时候,浏览器会为其分配一个最大可用的宽度,但是不负责分配高度,块级元素的高度是由子元素堆砌撑起来的,
所以html和body标签也是由子元素撑起来的;
元素高度百分比需要向上遍历父标签要找到一个定值高度才能起作用,如果中途有个height为auto或是没有设置height属性,则高度百分比不起作用,此时的情况是父元素高度依赖子元素堆砌撑高,而子元素依赖父元素的定高不起作用,互相依赖,却都无法依赖,死循环了;
浏览器负责分配块级元素宽度,那么浏览器也一定可以分配高度(只是没有做),那么浏览器本身是有宽度和高度的。
css 伪类匹配文档的根元素。
对于 HTML 来说, :root 表示元素,除了优先级更高之外,与 html 选择器相同。
非IE及ie8及以上浏览器都支持,在:root中声明相当于全局属性,只要当前页面引用了:root segment所在文件,都可以使用var()来引用
var()函数可以代替元素中任何属性中的值的任何部分。var()函数不能作为属性名、选择器或者其他除了属性值之外的值。(这样做通常会产生无效的语法或者一个没有关联到变量的值。)
:root{
/* background-color: antiquewhite; */
--default-bg-color: green; /* 设置变量*/
}
.box2{
background-color: var(--default-bg-color); /*引用变量*/
height: 100%;
}
css的顺序能决定网页渲染性能。
1、布局定位属性
display、posotion、float、clear、visibility、overflow(建议display第一个写,关系到模式)
2、自身属性
width、height、margin、padding、border、background
3、文本属性
color、font、text-decoration、text-align、vertical-align、white-space、break-wird
4、其他属性(CSS3)
content、cursor、border-radius、box-shadow、text-shadow、background:linear-gradient…
BFC(Block Formatting Context),一个BFC区域包含创建该上下文元素的所有子元素,但是不包括创建了新的BFC的子元素的内部元素。
只要满足以下任一条件,即可形成BFC区域
absolute
或fixed
);inline-block
、table-cell
、table-caption
、flex
,inline-flex
)只要符合一个就可以触发BFC,创建BFC最常见的做法是使用overflow:hidden
,因为它几乎不会造成任何负面影响。
overflow:hidden
可以实现左侧固定右侧100%效果利用的就是这个特性);overflow:hidden
可以清除浮动利用的就是这个特性);上面我们知道,同一个BFC内部相邻两个垂直方向的块级元素会发生margin合并,如果他们属于不同的BFC,他们之间的外边距将不会折叠。所以通过创建一个新的BFC我们可以防止外边距折叠。
清除浮动通常使用clear:both
来实现,但也可以通过创建一个BFC来清除浮动(通常的做法是给浮动父元素设置overflow:hidden
)。
Copyright (C) 2021-2026 98社区 All Rights Reserved 蜀ICP备20012692号-3