一、 引入CSS的三种方式
- 在HTML标签内加
style属性
<h1 style="background-color: grey; text-align:center;">直接在html标签内加style属性</h1>
- 运用
style标签
<style>
h1{
background-color: grey;
text-align: center;
}
</style>
- 用
link标签引入
/*style.css文件：*/
/*-------------------------*/
h1{
background-color: grey;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 引入style.css文件-->
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1>你的名字</h1>
</body>
</html>
- 在CSS文件内用
@import url(路径);引入其他CSS文件
/* a.css文件 */
body{
background-color: grey;
}
/*-------------------------------------*/
/*b.css文件*/
@import url(./a.css)
h1{
color: red;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 引入b.css文件，浏览器发现b.css文件中导入了a.css，于是会再次请求a.css文件-->
<link rel="stylesheet" href="./b.css">
</head>
<body>
<h1>你的名字</h1>
</body>
</html>
二、浮动与清除浮动
创建一个chearfix类，代码如下，要浮动的元素加上float属性，并在要浮动元素的父元素上加上这个类。
<style>
li{
/* float会导致块元素收缩*/
float: left;
}
.clearfix::after{
content: "";
display: block;
clear: both;
}
</style>
<ul class="clearfix">
<li><a href="#">ABOUT</a></li>
<li><a href="#">SKILLS</a></li>
<li><a href="#">EXPERIENCE</a></li>
</ul>
坑：
<style>
dl dt,
dl dd{
float: left;
/* height: 19px; */
}
dl dt{
width: 50%;
}
dl dd{
width: 50%;
}
</style>
<dl class="clearfix" style="border: 1px solid red">
<dt>年龄</dt>
<dd>18</dd>
<dt>所在城市</dt>
<dd>杭州</dd>
<dt>邮箱</dt>
<dd>chenzedcz@gmail.com</dd>
<dt>手机</dt>
<dd>12345678901</dd>
</dl>
由于没有指定高度，高度由块元素中的文件流决定，也即本例中的字体高度来决定。由于数字与文字的字体高度不一致，导致每个块元素的高度不一致，所以不能整齐排列。
image.png
三、chrome默认字体像素为16px
四、高度的决定
-
div高度由其内部文档流元素的高度总和决定；
文档流：文档内元素的流动方向，内联元素从左往右流，空间不够另起一行继续流，如果内联元素内是一个单词，这个单词默认是不会被截断的，要用
word-break属性来控制其是否可以被截断。块级元素从上往下流，每一个块级元素都会另起一行 -
span的高度由文字的像素以及字体的建议行高来决定的。
font-size是指一个字体的最高点和最低点之间的像素。
五、脱离文档流
-
position: fixed;：脱离文档流的块元素宽度会自动收缩，不会占满整个屏幕。可以加上width: 100%;这个属性来使这个块元素铺满，但是这会出现问题，元素的宽度加上boder、padding会超过其父元素的宽度。解决这个问题可以在这个块级元素上再嵌套一个div，使其成为div的子元素。注意：在开发中一般不要写
width: 100%;以及height: xxxpx;。 - 绝对定位
在子元素上写：position: absolute;
在父元素上写：position: relative;
六、div水平居中
div{
margin-left: auto;
margin-right: auto;
}
七、用CSS画三角形
//原理是把span的宽高都设置为0px，并将三个边框变为透明
<style>
.triangle{
border: 10px solid transparent;
width: 0px;
display: block;
border-top-width: 0px;
border-left-color: green;
}
</style>
<span class="triangle"></span>
八、SVG
svg{
width:100px;
height: 100%;
fill: white; /*颜色*/
SVG图标上下空间不一致，用vertical-align: top解决。
image.png
九、display: inline 、display: inline-block区别
-
inline: only
margin-left,margin-right,padding-left,padding-right -
inline-block:
margin,padding,height,width
A visual answer
Imagine a <span> element inside a <div>. If you give the <span> element a height of 100px and a red border for example, it will look like this with
display: inline
display: inline
display: inline-block
display: inline-block
display: block
enter image description here
Code: http://jsfiddle.net/Mta2b/
Elements with display:inline-block are like display:inline elements, but they can have a widthand a height. That means that you can use an inline-block element as a block while flowing it within text or other elements.
Difference of supported styles as summary:
网友评论