高度永远为宽度一半
hello
.height-half-width-wrap .outer {
width: 400px;
height: 100%;
background: blue;
margin: 0 auto;
display: flex;
align-items: center;
}
.height-half-width-wrap .inner {
position: relative;
width: 100%;
height: 0;
padding-bottom: 50%;
background: red;
}
.height-half-width-wrap .box {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.half-square-wrap .outer {
width: 400px;
height: 600px;
background: red;
}
.half-square-wrap .inner {
width: 50%;
padding-bottom: 50%;
background: blue;
}
测试文字测试文字
测试文字
测试文字
测试文字
测试文字
测试文字
测试文字
.word-vertically-center1 div {
float: left;
width: 200px;
height: 200px;
margin: 10px;
border: 1px solid #000;
line-height: 200px;
}
.word-vertically-center1 span {
display: inline-block;
vertical-align: middle;
line-height: 22px;
}
测试文字测试文字
测试文字
测试文字
测试文字
测试文字
测试文字
测试文字
.word-vertically-center2 div {
display: table-cell;
width: 200px;
height:150px;
border:1px solid blue;
vertical-align: middle;
}
测试文字测试文字
测试文字
测试文字
测试文字
测试文字
测试文字
测试文字
.word-vertically-center3 div{
float: left;
width: 200px;
height:150px;
border: 1px solid #000;
display: flex;
align-items:center;
}
上中下布局、左侧定宽右侧自适应、顶部栏固定、左侧固定可滚动等
具体文章见:https://blog.csdn.net/qq_39903567/article/details/114754898
HTML中的标签从闭合的角度可以分为闭合标签和空标签。而HTML中大部分标签都是闭合标签,其他少数为空标签,常见的空标签有
、 、 、
位置特性进行分类的,它将元素分为三类:块级元素,行内元素,行级块元素(也称块级行元素)。
**特点: **
常见的块级元素:
div、p、h1、h2…hn,ol、ul、dl、li、form、table
特点:
常见的行级元素:
特点:
常见的内联元素:
input、img
可以在行内样式或css样式中改变元素的display将三种元素进行转换。
浮动特征,清除浮动的方法:clear清除浮动、BFC清除浮动等。
具体文章见:https://blog.csdn.net/qq_39903567/article/details/114946607
vertical-align:垂直文本对齐
text-decoration:规定添加到文本的装饰
text-shadow:文本阴影效果
white-space:空白符的处理
unicode-bidi:设置文本的方向
:width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left
:background、background-color、background-image、background-repeat、background-position、background-attachment
:float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
:content、counter-reset、counter-increment
outline-style、outline-width、outline-color、outline
:size、page-break-before、page-break-after
:pause-before、pause-after、pause、cue-before、cue-after、cue、play-during
font:组合字体
font-family:规定元素的字体系列
font-weight:设置字体的粗细
font-size:设置字体的尺寸
font-style:定义字体的风格
font-variant:设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。
font-stretch:对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。
font-size-adjust:为某个元素规定一个 aspect 值,这样就可以保持首选字体的 x-height。
text-indent:文本缩进
text-align:文本水平对齐
line-height:行高
word-spacing:增加或减少单词间的空白(即字间隔)
letter-spacing:增加或减少字符间的空白(字符间距)
text-transform:控制文本大小写
direction:规定文本的书写方向
color:文本颜色
:caption-side、border-collapse、border-spacing、empty-cells、table-layout
:list-style-type、list-style-image、list-style-position、list-style
:page、page-break-inside、windows、orphans
:speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation
1、元素可见性:visibility
2、光标属性:cursor
1、字体系列属性
2、除text-indent、text-align之外的文本系列属性
1、text-indent、text-align
在标准盒子模型的情况下,元素的内容占据的空间是由width属性设置的,而内容周围的padding和border值是另外计算的,即在标准模式下的盒模型,盒子实际内容(content)的width/height=我们设置的width/height;盒子总宽度/高度=width/height+padding+border+margin。
标准模式下总宽度=width+margin(左右)+padding(左右)border(左右)
在怪异盒模型的情况下,浏览器的width属性不是内容的宽度,而是内容,内边距和边框的宽度的总和,即使在怪异模式下的盒模型,盒子的(content)宽度+内边距padding+边框border 宽度= 我们设置的width(height也是如此)。盒子总宽度/高度=width/height +margin = 内容区宽度/高度+padding+border+margin.
怪异模式下总宽度=width+margin(左右)(就是说width已经包含了padding和border值)
在css3中新增了box-sizing属性
box-sizing : content-box || border-box || inherit;
当为content-box时,将采取标准模式进行解析计算
当为border-box时,将采取怪异模式解析计算
有时候在浏览一些网站时会发现,当你把鼠标放在链接上时,它的颜色就会变,这就是用了css控制了它的四种状态,
大家都知道a标签可以用来实现超链接,
使用时注意:
css 伪类
ffff
测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字1
如果实现单行文本的溢出显示省略号用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。
实现方法:
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
实现方法:
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
-webkit-line-clamp CSS 属性 可以把 块容器 中的内容限制为指定的行数.
1、ID #id
2、class .class
3、标签 p
4、通用 *
5、属性 [type=“text”]
6、伪类 :hover
7、伪元素 ::first-line
8、子选择器、相邻选择器
特等: !important
第一等:代表内联样式,如: style=””,权值为1000。
第二等:代表ID选择器,如:#content,权值为0100。
第三等:代表类,伪类和属性选择器,如.content,权值为0010。
第四等:代表类型选择器和伪元素选择器,如div p,权值为0001。
通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
元素。
元素。
元素。
元素。
元素。
常用选择器权重优先级:!important > id > class > tag
!important可以提升样式优先级,但不建议使用。如果!important被用于一个简写的样式属性,那么这条简写的样式属性所代表的子属性都会被应用上!important。 例如:background: blue !important;
如果两条样式都使用!important,则权重值高的优先级更高
在css样式表中,同一个CSS样式你写了两次,后面的会覆盖前面的
样式指向同一元素,权重规则生效,权重大的被应用
样式指向同一元素,权重规则生效,权重相同时,就近原则生效(就近指的是标签之间),后面定义的被应用
样式不指向同一元素时,权重规则失效,就近原则生效,离目标元素最近的样式被应用
!important > 行内样式 > 内联样式 and 外联样式(内联样式和外联样式的优先级和加载顺序有关)
display:none是彻底消失,不在文档流中占位,浏览器也不会解析该元素;visibility:hidden是视觉上消失了,可以理解为透明度为0的效果,在文档流中占位,浏览器会解析该元素;
使用visibility:hidden比display:none性能上要好,display:none切换显示时visibility,页面产生回流(当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等,页面重新构建,此时就是回流。所有页面第一次加载时需要产生一次回流),而visibility切换是否显示时则不会引起回流。
其他隐藏操作:
background: transparent;//设置为透明
css3中
opacity:0;//设置不透明度为0,透明
1、HTML的加载
HTML是一个网页的基础,下载完成后解析
2、其他静态资源加载
解析HTML时,发现其中有其他外部资源链接比如CSS、JS、图片等,会立即启用别的线程下载。
但当外部资源是JS时,HTML的解析会停下来,等JS下载完执行结束后才继续解析HTML,防止JS修改已经完成的解析结果
3、DOM树构建
在HTML解析的同时,解析器会把解析完成的结果转换成DOM对象,再进一步构建DOM树
4、CSSOM树构建
CSS下载完之后对CSS进行解析,解析成CSS对象,然后把CSS对象组装起来,构建CSSOM树
5、渲染树构建
当DOM树和CSSOM树都构建完之后,浏览器根据这两个树构建一棵渲染树
6、布局计算
渲染树构建完成以后,浏览器计算所有元素大小和绝对位置
7、渲染
布局计算完成后,浏览器在页面渲染元素。经过渲染引擎处理后,整个页面就显示出来
构建DOM树->构建渲染树->布局渲染树:计算盒模型位置和大小->绘制渲染树
后续将持续更新…
本文链接:https://blog.csdn.net/qq_39903567/article/details/114951168