CSS3
2021-09-29 20:54:37 0 举报AI智能生成
登录查看完整内容
CSS的基础总结很全面，常用的都在里面
作者其他创作
大纲/内容
行内样式：body里
内部样式head里
链接式link
导入式@import url(CSS/style.css)
外部样式
导入方式：就近原则
标签选择器
类选择器： .class的名称{} ，可以复用
Id选择器：#id名称{} ，id唯一不能复用
基本选择器id选择器>class选择器>标签选择器
后代选择器body p
子选择器body>p只有一代
相邻兄弟选择器.m+p向下的一个
通用兄弟选择器.m~p向下的所有同辈
层次选择器
ul的第一个子元素ul li:first-child
ul的最后一个子元素ul li:last-child
定位到父元素，然后选第一个元素，按顺序选p:nth-child(1)
定位到父元素，然后选p元素中的第二个元素，按类型选p:nth-of-type(2)
结构伪类选择器
属性选择器（常用）
选择器
font-family:字体样式
font-weight:字体粗细
text-decoration: none取消下划线
text-align: center居中
首行缩进text-indent:1em
line-height行高
文本图片水平对齐vertical-align: middle;
阴影text-shadow:水平距离，竖直距离，模糊半径，颜色
字体
鼠标悬浮的状态a:hover{}
鼠标按住未释放的状态a:active{}
超链接伪类
不平铺就一个no-repeat
x轴方向平铺background-repeat: repeat-x;
y轴方向平铺background-repeat: repeat-y;
背景图片:默认都是平铺background-image:url(\"路径\");
外边距margin，整个框居中：margin: 0 auto
边框border，solid实线；dashed虚框
内边距padding
auto×auto=margin + padding + border + 内容宽度
盒子
圆角边框也有四个参数，仍为顺时针顺序
圆角边框border-radius
盒子阴影box-shadow
盒子模型
display: inline;行内元素
display: block;块元素
inline-block 既是块元素又有行内元素特性
display
设置父级边框高度足够高
在div里增加一个空的div，清除浮动clear: both;clear: right;
overflow
在父级添加一个伪类：after
父级塌陷解决方案
float上下左右浮动
浮动
相对定位relative，仍然在标准文档流里面，基于原来的位置定位
基于父级定位
基于浏览器定位
绝对定位absolute，不在标准文档流
固定定位fixed
层级0-999，相当于图层概念
z-index
定位
CSS3
0 条评论
回复 删除
下一页
