CSS

2019-02-20 本文已影响0人 BOB_BI

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

CSS