CSS—“层叠样式表 (Cascading Style Sheets)”
闲来无事，我决定写一篇CSS笔记，以便以后查阅复习。经过5个小时的整理，我总结了以下内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">/*嵌入式*//*注释语句*/
/*选择器*/
*{}/*通用选择器*/
div{}/*标签选择器*/
.div{}/*类选择器*/
#div0{}/*ID选择器*/
#div0>#div1{}/*子选择器*/
#div0 .div{}/*后代选择器*/
a:hover{}/*伪装选择器*/
#div1,#div2{}/*分组选择器*/
/*字体样式*/
span{
font-family:"Microsoft Yahei",sans-serif;/*字体*//*"微软雅黑""宋体"*/
font-size:14px;/*字号*/
font-weight:bold;/*加粗*//*<strong></strong>*/
font-style:italic;/*斜体*//*normal(正常)oblique(倾斜)*/
/*font-variant*/
color:#FF0000;/*十六进制颜色*/
color:red;/*英文命令颜色*//*blue skyblue*/
color:rgb(255,0,0);/*RGB颜色*/
/*line-height:1.5em;*//*行高*/
font:italic bold 14px/1.5em "Microsoft Yahei",sans-serif;/*简写*/
}
/*文本样式*/
p{
text-decoration:none;/*装饰线*//*overline(上)line-through(中)underline(下)*/
text-indent:2em;/*首行缩进*/
line-height:1.5em;/*行间间距*/
letter-spacing:50px;/*文字间隔/字母间隔*/
word-spacing:50px;/*单词间隔*/
text-align:center;/*对齐方式*//*left(左对齐)center(居中)right(右对齐)*/
}
/*盒模型*/
a{display:block;}/*将内联元素a转换为块状元素*/
div{display:inline;}/*将块状元素div转换为内联元素*/
/*display:inline-block;*//*内联块状元素*/
/*display: none;*//*none设置此元素不会被显示，当想要元素隐藏的时候可以使用此值。*/
div{
width:200px;/*宽度*/
height:200px;/*高度*/
background-color:red;/*背景色*/
border-width:1px;/*边框宽度*/
border-style:solid;/*边框样式*//*dashed(虚线)dotted(点线)solid(实线)*/
border-color:red;/*边框颜色*/
/*border-top:1px solid red;*//*border-right border-bottom border-left*/
border:1px solid red;/*简写*/
/*边框圆角*/
border-top-left-radius:10px;/*border-top-right-radius border-bottom-right-radius border-bottom-left-radius*/
border-radius:10px 20px 30px 40px;/*左上 右上 右下 左下*/
border-radius:10px 20px;/*左上右下 右上左下*/
border-radius:100px;/*4*//*50%*//*圆*/
/*内边距*/
padding-top:10px;/*padding-right padding-bottom padding-left*/
padding:10px 20px 30px 40px;/*上右下左*/
padding:10px 20px；/*上下 左右*/
padding:10px;/*4*/
/*外边距*/
margin-top:10px;/*margin-right margin-bottom margin-left*/
margin:10px 20px 30px 40px;/*上右下左*/
margin:10px 20px；/*上下 左右*/
margin:10px;/*4*/
/*总结一下：padding和margin的区别，padding在边框里，margin在边框外。*/
/*一个元素实际宽度(盒子的宽度)=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。*/
}
/*布局模型*/
/*浮动模型*/
div{float:left;}/*left(左浮动)right(右浮动)*/
/*层模型*/
div{
position:relative;/*绝对定位*//*absolute(绝对定位)relative(相对定位)fixed(固定定位)*/
left:100px;top:100px;/*right bottom*/
}
#div1{
position:absolute;/*relative与absolute组合使用*/
top:50px;left:50px;
}
/*弹性盒模型*/
.box{
display:flex;
justify-content:flex-start;/*flex-start(交叉轴的起点对齐)flex-end(右对齐)center(居中)space-between(两端对齐，项目之间的间隔都相等)space-around(每个项目两侧的间隔相等)*/
align-items:flex-start;/*flex-start(左对齐)flex-end(交叉轴的终点对齐)center( 交叉轴的中点对齐)baseline(项目的第一行文字的基线对齐)stretch(如果项目未设置高度或设为auto，将占满整个容器的高度)*/
}
.box1{flex:1;}
.box2{flex:3;}
.box3{flex: 2;}
</style>
<link href="base.css" rel="stylesheet" type="text/css" /><!-- 外部式 -->
</head>
<body>
<!-- 链接方式 --><!-- 优先级 -->
1、内联式
<p style="color:red;font-size:14px"></p>
2、嵌入式
3、外部式(外联式)
优先级:内联式 > 嵌入式 > 外部式(就近原则)
<!-- 选择器 --><!-- 权值 --><!-- 优先级 -->
<div class="div" id="div0">
<div class="div" id="div1"></div>
<div class="div" id="div2"></div>
<a></a>
</div>
权值:标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。
还有一个权值比较特殊，继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。
选择器的优先级:内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器
样式的优先级:浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式
<!-- 字体样式 --><!-- 文本样式 -->
<p><span></span></p>
长度值：1、像素 2、em 3、百分比
<!-- 盒模型 -->
*常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
**块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
*常用的内联元素(行内元素)有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
**内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
*常用的内联块状元素有：
<img>、<input>
**inline-block 元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
<!-- 布局模型 -->
1、流动模型（Flow）
2、浮动模型（Float）
3、层模型（Layer）
1、绝对定位(position:absolute)
2、相对定位(position:relative)
3、固定定位(position:fixed)
<div>
<div id="div1"></div>
<div id="div2"></div>
</div>
<!-- 弹性盒模型 -->
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
*flex属性
1、设置display: flex属性可以把块级元素在一排显示。
2、flex需要添加在父元素上，改变子元素的排列顺序。
3、默认为从左往右依次排列,且和父元素左边没有间隙。
*flex占比
1、给子元素设置flex属性,可以设置子元素相对于父元素的占比。
2、flex属性的值只能是正整数,表示占比多少。
3、给子元素设置了flex之后,其宽度属性会失效。
<!-- 小技巧 -->
*水平居中设置
1、行内元素:text-align:center
2、定宽块状元素: margin:10px auto;/*margin-left:auto;margin-right:auto;*/
*已知宽高实现盒子水平垂直居
*宽高不定实现盒子水平垂直居中(transform: translate(-50%, -50%);)
</body>
</html>
1355
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
