CSS入门
层叠样式表(cascading style sheet)
历史
1994 哈肯和伯特发明
1997 w3c接管
1998 css2.0
2011 css3
写
引入
1.head中
<link href="路径" rel"stylesheet"></link>
2.css文件中
@import url(路径)
3.内联
4.<style></style>
浮动
清除浮动
1.float
2.给浮动元素的父元素添加：
.clearfix::after{
content: "";
display:block;
clear:both;
}
单词换行 word-break: break-all/break-word
- 什么是文档流？
块级元素从上往下流动，内联元素从左往右流动 - div的高度由什么决定？
它内部文档流元素高度综合决定的，不要轻易用height，width：100%，塌陷可用。 - span的高度？
由fontsize和字体的建议行高综合决定,页面中
<span>1</span>
<span>2</span>
1与2之间有有一个空格
- 内联元素的高度？
line-height 是可以确定内联元素高度的
width,height无效 - fixed 宽度会内缩
background-position：center center；
伪类选择器：可选中其他元素但不是元素 :nth-child()
li:nth-child(even){} //所有第偶数个子元素
伪元素::before, ::after
display:inline-block; //绑
vertical-align:top; //定
padding建议与borderbox一起使用
margin在ie有bug
link href
a href
script src
img src
iframe src
CSS深入浅出
历史
- css之前
<body bgcolor="red">
<center></center>
<font color="red"></font> - 最早的媒体查询media = "print" //只给打印机添加样式
3.一个段落中文字环绕图片
img设为float:left;
各属性之间的相互影响
margin合并
上下两个元素有相同的margin，则他们之间的margin会合并成一个
-display：flex;
-display: table;
-border
以上三种方式可阻止合并
li的小圆点
小圆点是因为li的默认属性display:list-item
将display的值改成其他即可消除
display
只要position: absoluet；
display:inline/inline-block；会改为block
各元素之间的相互影响
position:fixed 和transform
子元素position：fixed
父元素/祖先元素transform scale(0.9)
子元素将被transform的元素包裹
float
float的元素对相邻非浮动元素元素不影响，对其文字影响
宽度与高度
-给inline元素设置宽高是没有任何效果的
宽度
实现两端对齐：
1.justify只有在两行以上的情况有用
2.使用after
span{
text-align:justify;}
span::after{
contert: '';
display: inline-block;
width:100%;}
3.inline-block 元素之间会有空隙，想要消除使用float
多行文字溢出
1.单行文本溢出部分变成...
white-space：nowrap；不换行
overflow: hidden;
text-overflow:ellipsis;
2.多行文本溢出部分边...
🔍css multi line text ellipsis
image.png
网友评论