css 系统自学笔记2017-12-04
一、几个常用的可以连写的样式属性
1、backgroud: 背景连写:没有先后顺序,都是可选的。
2、font字体属性连写:
font:
二、元素分类
块级元素:div p h1~h6 ul li ol dl dt dd table等
特点:1、宽度:没有定义默认为父元素的宽度 2、高度:默认为0,如果有内容,高度会被内容撑开。 3、独占一行 4、可以设置宽高
行内元素:span strong em i 特点: 在一行显示 定义宽高无效
行内块级:image input 特点:在一行显示 可以定义宽高
三:行高
浏览器默认文字大小:16px
行框=文字大小+上边距+底边距
行高 = 文字基线与基线的距离
一行文字行高和容器高度一致的时候,这行文字垂直居中。
独立的盒子设置行高,行高的最终值除了以像素为单位以外,是设置的值与文字大小的乘积。
嵌套的盒子,给父元素设置行高值,以em和百分比为单位,子元素的行高值是设置的值和父元素文字大小的乘积,不带单位,子元素的行高值是设置的值与子元素文字大小的乘积。行高单位推荐像素。
四、盒子模型之边框border
四个方位值 left | right | top | bottom
☆border-top-color: 边框颜色
☆border-top-style: solid; 实线
dotted; 点线
dashed; 虚线
☆border-top-width: 边框粗细
边框属性连写
单一方位 border-top: 10px solid green; 线性为必写值
四个方位 border: 10px solid red;
◆表格边框合并 border-collapse: collapse;
五、盒子模型之外边距 margin
方位值: left | right | top | bottom
◆外边距连写
margin: 30px; 上下左右外边距30px
margin: 20px 30px; 上下外边距20px 左右外边距30px
margin: 20px 30px 40px; 上20px 左右30px 下40px
margin: 20px 30px 40px 50px; 上20px 右30px 下40px 左50px 顺时针
◆垂直方向外边距合并
垂直方向相邻的2个盒子,给上边盒子设置底外边距,给下边的盒子设置顶外边距,发生了垂直方向外边距合并,执行的是设置的较大的值。 水平方向外边距不会合并
◆垂直方向外边距塌陷
嵌套的盒子,给子盒子设置顶外边距,会将父盒子带下来,发生了外边距塌陷。
解决方案:
☆给父盒子设置边框(加border)
☆给父盒子设置overflow:hidden; 触发bfc
六、 内边距 padding
位值 left | right | top | bottom
◆内边距连写
padding: 20px; 上下左右内边距20px
padding: 20px 30px; 上下20px 左右30px
Padding: 20px 30px 40px; 上20px 左右30px 下40px
Padding: 20px 30px 40px 50px; 上20px 右30px 下40px 左50px;
◆内边距撑大盒子的问题
盒子的宽度=边框的粗细+内边距+设置的宽度
盒子的高度=边框的粗细+内边距+设置的高度
◆内边距不撑大盒子的问题
嵌套的盒子,子盒子不设置宽度的时候,默认了父盒子的宽度,给子盒子设置左右内边距,只要内边距的值不大于父盒子的宽度,子盒子不会被撑宽。
七、 margin:0 auto; text-align:center;的区别
margin:0 auto 只能让块元素水平居中
text-align: 块元素里的文字、图片,行内元素、行内块元素,给块元素设置text-align:center,内容居中。text-align:center对行内元素无效。text-align:center;对行内块有效。
八、内外边距注意点
1.1 行内块元素可以定义内外边距。
1.2 行内元素只能设置左右内外边距,上下内外边距会被忽略掉。
1.3 标准流(文档流)
在页面上,自上而下,自左而右,块元素独占一行,行内元素在一行上显示,直到碰到父元素的边框换行。
九、浮动
float: left | right
◆特点
★浮动的元素的会脱离标准流,不占据原来的位置。
★浮动元素在一行上显示,即使代码换行,中间没有缝隙。
★元素浮动之后顶对齐。
★元素浮动之后,默认宽高为0,内容可以撑开宽高。
★浮动元素只影响下边的元素,不会影响上边的标准流块元素。
★行内元素浮动之后,会转换为行内块(不推荐使用,转行内块推荐使用display:inline-block;)
◆作用
★文本绕图 文字不参与浮动(文字是不参与浮动的)
★制作导航
★网页布局
十、清除浮动
当父容器没有设置高度,里面的盒子没有设置浮动的情况下会将父容器的高度撑开。一旦父容器中的盒子设置浮动,脱离标准文档流,父容器立马没有高度,下面的盒子会跑到浮动的盒子下面。出现这种情况,我们需要清除浮动
clear: left | right | both
◆清除浮动的方法
☆给父元素设置高度
☆额外标签法
在最后一个浮动元素的后边,添加额外标签,会产生冗余代码,不推荐使用。
☆给浮动元素的父元素使用overflow:hidden;触发bfc
如果有元素在父盒子之外,外边的部分会被隐藏掉。
☆伪元素清除浮动
.clearfix:after{
display:block;
content:”.”;
height:0;
line-height:0;
visibility:hidden;
clear:both;
}
.clearfix{
zoom:1;
}
十一、CSS初始化
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; } h1, h2, h3, h4, h5, h6{ font-size:100%; } address, cite, dfn, em, var { font-style:normal; } code, kbd, pre, samp { font-family:couriernew, courier, monospace; } small{ font-size:12px; } ul, ol { list-style:none; } a { text-decoration:none; } a:hover { text-decoration:underline; } sup { vertical-align:text-top; } sub{ vertical-align:text-bottom; } legend { color:#000; } fieldset, img { border:0; } button, input, select, textarea { font-size:100%; } table { border-collapse:collapse; border-spacing:0; }
View Code
十二、定位
left | right | top | bottom
1.1 静态定位
position:static; 默认值 标准流
1.2 绝对定位
position:absolute;
◆特点(看脸型)
★绝对定位的元素会脱离标准流,不占据原来的位置。
★绝对定位的元素位置基于浏览器偏移。
★嵌套的盒子,父元素没有使用定位,子元素使用绝对定位,子元素的位置基于浏览器偏移。
★嵌套的盒子,父元素使用绝对定位,子元素使用绝对定位,子元素的位置基于父元素的位置偏移。
★给行内元素使用绝对定位,会转换为行内块显示模式(不推荐使用,转display:inline-block;)
1.3 相对定位
position:relative;
◆特点
★相对定位的元素不脱标,占据原来的位置。
★相对定位的元素位置基于自身位置偏移。
★子绝父相,父元素相对定位,子元素绝对定位,子元素的位置基于父元素偏移。
★给行内元素使用相对定位,不能转换为行内块。
1.3.1 调整定位元素层叠顺序
z-index:0-1000,不推荐使用负值。
Z-index:auto(0); 默认值是auto
值越大,元素越在上边。
1.3.2 定位的盒子居中问题
◆margin: 0 auto;只能让标准流里的块元素水平居中。
◆定位的盒子居中
首先使用left:50%;向右走父盒子的一半,再使用margin-left:负值向左走自身的一半,实现了定位的盒子居中问题。
1.4 固定定位
position: fixed;
◆特点
★固定定位的元素会脱离标准流,不占据原来的位置。
★固定定位的元素位置基于浏览器可视窗口进行偏移。
★给行内元素使用固定定位,可以装换为行内块(不推荐使用,转行内块推荐使用display:inline-block;)
十三. vertical-align属性
Vertical-align: 对行内块元素敏感。
baseline; 基线对齐 默认值
top; 行框顶部对齐
middle; 中线对齐
bottom; 底线对齐
十四. Overflow溢出的处理
overflow:visible; 默认值 溢出显示
hidden; 溢出隐藏
auto; 溢出生成滚动条,否则不生成
scroll; 不管内容是否溢出,都生成滚动条
十五、 内容的隐藏方式
display:none; 隐藏元素 隐藏之后不占据原来的位置
display:block; 元素可见
overflow:hidden; 溢出隐藏
visibility:hidden; 隐藏元素 隐藏之后还占据原来的位置
十六、 标签的包含规范
◆div可以嵌套任意标签
◆p元素不能嵌套块元素
◆标题可以嵌套块元素
◆块元素可以嵌套行内块元素、行内元素
◆行内块元素不能嵌套块元素,可以嵌套行内元素
◆行内元素不能嵌套块元素、行内块元素,可以嵌套行内元素
转载于:https://www.cnblogs.com/lxf1117/p/7977833.html
css 系统自学笔记2017-12-04相关推荐
- Java自学笔记——Java面向对象——04.抽象类、接口、内部类
Java 面向对象各节 Java自学笔记--Java面向对象--01.回顾方法 Java自学笔记--Java面向对象--02.构造器.类和对象 Java自学笔记--Java面向对象--03.封装.继承 ...
- xingkongmix雅思自学笔记(22/12/24)day01
xingkongmix雅思自学笔记 雅思真经派玩家攻略 三剑使用指南 雅思词汇真经 单词学习 chapter22 雅思听力考点词真经 听力真经六脉神剑 口语真经 真经派口语门规 雅思阅读 雅思阅读三剑 ...
- css入门自学笔记1
如何插入样式表 插入样式表的方法有三种: 外部样式表(External style sheet) 内部样式表(Internal style sheet) 内联样式(Inline style) 外部样式 ...
- 51CTO博客2.0 答疑QA文档【2017.12.04更新】
博客2.0 – v1.0.0,以匠心精神,做好最重要的事 [Markdown编辑器]样式不错乱,减去调整的烦恼 [图片拖拽复制]再也不用一张张上传了,写文更高效 [文章目录自动提取]想看哪里点哪里 [ ...
- .net系统自学笔记——数组
数组 1.简单数组 2.多维数组 3.锯齿数组 4.Array类 5.作为参数的数组 6.枚举 7.元组 8.结构比较 如果需 要 使 用同 一 类型的 多 个对 象,就可以 使 用集合和数组.C#用 ...
- html学习笔记2017.12.30
<html> 与 </html> 之间的文本描述网页 <body> 与 </body> 之间的文本是可见的页面内容 <h1> 与 </ ...
- FPGA学习笔记(2020.04.24)业精于勤荒于嬉,成于思毁于随
FPGA自学笔记(2020.04.24) 最近老师再教在系统编程技术,已经上过四节课,发现在家 学习效率低下好多东西都忘掉了.所以做一下总结笔记来让自己印象深刻. 业精于勤荒于嬉,成于思毁于随. 第一 ...
- 【302天】跃迁之路——程序员高效学习方法论探索系列(实验阶段60-2017.12.04)...
实验说明 从2017.10.6起,开启这个系列,目标只有一个:探索新的学习方法,实现跃迁式成长 实验期2年(2017.10.06 - 2019.10.06) 我将以自己为实验对象. 我将开源我的学习方 ...
- Ubuntu 12.04不能在华硕F81se系列电脑上安装解决办法
本人华硕F81se系列的电脑,刚开始是装的ubuntu 10.04的系统,周末闲的无聊,就想把系统换成ubuntu 12.04的,从ubuntu官网上下载了12.04的安装包,下了个usb insta ...
最新文章
- 参数量110亿,附赠750GB数据集,Google提NLP预训练模型T5
- git ,报403错误,完美解决方案
- 根文件系统构建(BusyBox方式)
- ubuntu18.04 用xhell连接失败
- 搜索 —— 广搜的优化技巧
- 码农干货系列【6】--javascript异步编程之:世界上最短的Promise库
- HBase region的split过程浅析
- latex \textsuperscript{\dagger} 报错
- 摄像机没有连接到计算机代码45,摄像头错误代码的解决办法
- .net Core 3.1 项目打包部署到Windows服务
- MATLAB中求某个函数的积分并绘图
- Android:从源码剖析Hander机制
- 牛逼c语言代码,这段c语言代码牛逼在哪?
- 嵌入式开发之davinci--- 8148/8168/8127 中的图像采集格式Sensor信号输出YUV、RGB、RAW DATA、JPEG 4种方式区别...
- Android_基于g-sensor的坐下动作的的识别
- 台式计算机截图快捷键,台式/笔记本电脑截图快捷键是哪个?
- 【EasyExcel 教程】详解填充Excel -- 填充
- 腾讯QQ精准TIPS消息营销介绍
- 谷歌发布Amber项目,用AI分析脑电波诊断治疗抑郁症
- 人工智能--Keras数据加载与增强