笔记 HTML+css

向右看齐 2022-11-29 00:47 131阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>note</title>
    </head>
    <body>

可以通过display更改  
1.行级元素、内联元素 inline(凡是带有inline的元素都有文字特性，就有文字分隔符)  
文字底对齐  
feature：内容决定元素所占位置  
不可以通过css改变宽高

2.块级元素 block  
feature：独占一行  
可以通过css改变宽高

3.行级块元素 inline-block  
feature：内容决定大小  
可以改宽高

盒子模型  
盒子三大部分

1.盒子壁 border  
body默认margin为8px  
2.内边距 padding

3.盒子内容 width + height 内容区

层模型  
position: absolute  
脱离原来位置进行定位  
最近的有定位的父级进行定位，如果没有就对文档进行定位  
每一个absolute 都是一个新层

position：relative  
相对自己原来位置进行定位  
保留原来位置进行定位

float模型  
float:left/right  
1.浮动元素产生了浮动流  
所有产生了浮动流的元素，块级元素看不到他们  
产生了bfc的元素和文本类属性的元素以及文本都能看到浮动元素  
2.clear属性  
clear:both清楚周围的浮动流  
在浮动元素的最下面加一个clear：both可以撑开父级  
块级元素才能清除浮动  
p

margin塌陷问题  
如何触发盒子的bfc(任意一条都行)  
position:absolute;  
display:inline-block  
float:left/right 浮动  
overflow:hidden;溢出部分隐藏  
position:absolute; float:left/right (报纸类布局)  
会从内部把元素变成inline-block

内联样式的权重是!important1000  
id选择器的样式0100  
类和伪类选择器0010  
标签选择器0001  
通配符选择器("\*")0000  
16进制

伪类选择器  
当鼠标移动到上面

/*伪元素 天生就存在 行级元素没有元素结构却可以当成元素操作*/  
span::before\{  
content: '赵大大';  
\}  
span::after\{  
/*伪元素清除浮动*/  
display: block;  
clear: both;  
content: '';  
visibility:hidden;  
height:0  
\}

溢出容器，打点展示  
1.单行文本  
white-space: nowrap;/*溢出部分不换行*/  
overflow: hidden;/*溢出部分隐藏*/  
text-overflow: ellipsis;/*溢出部分变成...*/  
2.多行文本  
手写... 由后端计算出来  
多行只做截断

背景图片  
background-image: url("\#");  
background-size: 200px 200px;  
background-repeat:no-repeat ;/*图片铺不满 不重复出现*/  
background-position: 100px 100px;/*图片出现的位置*/

行级元素只能嵌套行级元素

不行  
块级元素可以嵌套任何元素  
a里面不能套a

</body>
    </html>