css
Wendy Bryant
这个作者很懒,什么都没留下…
展开
-
CSS定位--绝对定位是根据谁定位的?
绝对定位是相对于谁确定位置的?有一句口诀:子绝父相,子绝父绝。意思就是,开启了绝对定位的子元素根据它的开启了相对定位或者绝对定位的父元素而确定位置。 事实上,绝对定位的元素是根据包含块确定位置的,包含块就是离他最近的开启了定位的祖先元素。 但是,如果祖先元素没有开启过定位,那就相对于初始包含块定位什么是初始包含块?上代码!<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"&g原创 2021-03-17 18:56:31 · 1620 阅读 · 1 评论 -
初识flex弹性布局
一、弹性布局 和 开启弹性空间弹性布局(伸缩布局 / 弹性盒子 / flex布局),弹性布局是父元素和子元素之间的关系父元素:弹性空间,父元素还具备之前的显示模式特征。 子元素:弹性元素(弹性项),不在具备之前的显示模式特征,默认当父元素盛不下时会进行压缩。开启弹性空间:给需要开启弹性的元素的父元素设置属性display:flexhtml<body> <div class="box1"> <div>1</div> <原创 2021-02-01 20:55:27 · 133 阅读 · 0 评论 -
标准盒子模型和怪异盒子模型
标准盒子模型和怪异盒子模型标准盒子模型: 当元素设置宽高后,再给元素设置padding和border后,元素的尺寸会变大,如果不希望元素的尺寸变大,要相应从content区域手动减去padding和border撑开的大小怪异盒子模型(内减模式): 当元素设置宽高后,再给元素设置padding和border后,元素的尺寸不会变大,会自动从content区域减去padding和border撑开的大小,盒子的尺寸不变注意: 使用怪异盒子模型时,必须设置固定的宽高才...原创 2021-01-27 21:08:42 · 198 阅读 · 0 评论 -
css伪元素before和after用法详解
css伪元素before和after用法详解 要想了解伪元素before和after到底是什么,首先就应该打开编译器敲入代码并在浏览器运行检查<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box{ width: 300px; ...原创 2021-01-27 19:53:05 · 8490 阅读 · 1 评论 -
解决浮动元素导致其父元素高度塌陷的问题
解决浮动元素导致其父元素高度塌陷的问题当一个子元素开启浮动时,会导致其父元素的高度塌陷,如下所示父元素未设置宽高,仅有一个5像素的边框,可见上下边框已经重合,父元素高度塌陷,子元素从父元素中溢出<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * {原创 2021-01-19 19:27:29 · 313 阅读 · 0 评论 -
css的继承和层叠
css选择器权重,以及样式继承1、CSS选择器 !important > 行内式 > id选择器 > 类选择器 > 标签选择器权重值: 无穷大 1000 100 10 1同一选择器,靠后者生效2、样式继承继承的权重值为零,所以继承的样式可以被任何选择器修改的属性对应的属性值所覆盖。例:<!DOCTYPE html><h...原创 2021-01-18 17:19:57 · 103 阅读 · 0 评论 -
css复合属性的层叠
关于css复合属性的层叠问题 1、用font复合属性时,建议严格按照(是否倾斜 是否加粗 字号/行高 字体)的顺序写,字号和字体是必填项。例1:font:40px “宋体”; 建议不改字体不用此复合属性 2、当复合属性和单属性同时存在时,例2:font-style:italic;font:700 40px “宋体”;此时倾斜不会生效,因为font复合属性未设置倾斜,所以层叠了上面的font-style建议先写复合属性,再写单属性...原创 2021-01-18 19:48:29 · 166 阅读 · 2 评论