Open JackWong992 opened 6 years ago
block-level: div h1~h6 p hr form ul dl ol pre table li dd dt tr td th inline-level: em strong span a br img button input label select textarea code script 区别: 给块级元素设置宽高有效,给行内元素设置宽高无效 块级元素可以容纳行内元素和其他元素,但是行内元素只能容纳行内元素 块级元素独自占据一整行的空间,而行内元素只占据自身的宽度空间 块级元素的高度,行高以及外边距和内边距都可控制;行内元素的高,行高及外边距和内边距部分可改变 行内元素设置margin,padding只有左右有效,上下无效
CSS继承:父元素设置了某种样式的属性,子元素也显示这种属性。 可以继承的属性:color , font: size/wight/family/line-height 不可继承的属性:border,margin,padding,display
行内元素水平居中: text-align: center; 块级元素水平居中: margin-left: auto; margin-right: auto;
.triangle{ width:0px; height:0px; border: 40px solid black; border-color: transparent transparent green; } 预览地址:http://js.jirengu.com/jopasusona/1/edit?html,css,output
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /需要注意的上面的代码如果直接对行内元素使用是没有效果的/ 预览地址:http://js.jirengu.com/jopasusona/1/edit?html,css,output
px是指一个具体的固定的单位 em是一个相对的单位是相对于父元素字体的大小 rem 是一个相对的单位,是相对于根元素的大小
body{ font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif; } font: size/line-height style 字体大小是12像素,行高是字体像素大小的1.5倍,默认使用字体的样式为tahoma 后面用逗号隔开表示为备用字体。'\5b8b\4f53'表示为宋体,这是Unicode编码格式 如果电脑中没有tahoma就使用arial字体,如果没有arial字体就使用'Hiragino Sans GB'字体,如果没有就使用宋体,最后使用sans-serif字体
http://js.jirengu.com/jenukobiqe/1/edit?html,css,output http://js.jirengu.com/vonahuzozu/1/edit?css,output http://js.jirengu.com/relojuhigi/3/edit http://js.jirengu.com/nezamatubo/1/edit?html,css,output http://js.jirengu.com/qakabehiwe/1/edit?html,css,output
background: 简写属性,作用是将背景属性设置在一个声明中 background-attachment: 背景图片是否固定/随着页面的其余部分滚动 background-color: 背景颜色 background-image: 设置图像为背景 background-position:设置图像的起始位置 background-repeat:设置图像是否重复 background-size:设置背景的大小/contain:图片包含在其中/cover:图片等比例缩放
我们知道inline元素是以行内元素显示,block是指以块级元素显示。 inline的元素好处宽度是有自己的内容决定,但是不能设置宽高,内外边距 block的元素好处是可以设置宽高,内外边距,内容是从上倒下的。 给元素设置为inline-block属性是将元素同时具备这两种属性。 解决缝隙:
清除浮动的代码:
.clearfix:before{
content:'';
display:block;
clear:both;
}
浮动会让元素脱离文档流,浮动不再占据文档流的位置,也使浮动元素周围的元素表现的如同浮动元素不存在一样,给布局带来了一些副作用,清除浮动就是解决浮动的坍塌行为。 (1)
.clearfix:after{
content: '';
display: block;
clear: both;
}
(2) 在结尾处加一个空的div
.clearfix{clear:both}
CSS全称:Cascading Style Sheets,层叠样式表 HTML注释: CSS注释:/xxx/ JS注释://
CSS的展现方式:内联样式,内部样式,外部样式 @import:url("abc.css")/"xxx.css" 用于从其他样式表引入样式规则,这些规则必须优先于其他类型的规则。
文件路径:
相对路径:
(1) css/a.css ./css/a.css
这两种的写法是一样的,只不过后面的写法更加规范一些。表示index.html和CSS文件夹是同级目录 (2)b.css 这种写法表示a.css和b.css在同级目录下 (3)../img/a.png 在a.css中要插入图片a.png,首先找到css/a.css,发现css和img同级所以需要在往上一级找,接着就是../img/a.png
绝对路径:
/user/bin/src/config 本地文件的绝对地址,相当于一个写死的地址。 网站路径: http://cdn.swiper.js / http://bootstrap.css 一般我们写入网站的相对路径
书写规范:
属性名冒号后面要加一个空格(别问问啥,防止以后踩坑)
选择器类型:
基础选择器:
*:通用选择器
:id选择器
.: 类选择器 elmement:标签选择器
组合选择器:
多元素选择器:elmement , element{} 后代选择器: E F{} 匹配E元素所有的后代 子代选择器:E>F{ } 匹配E元素的子元素 相邻选择器:E+F{ } 匹配E元素直接相邻的同级元素F 普通相邻选择器:E~F{}匹配E元素之后的同级元素F 多个类的选择器: .class.active{} 选中既含有class属性又含有active属性的选择器 ID和class选择器:elment#id{},同上。
属性选择器:
E[attr]:所有含有属性attr的元素 E[attr =value]:所有含有属性值attr=value的元素 E[attr~=value]: 匹配 E[attr^=value]:匹配属性值为attr以value开头的元素 E[attr$=value]:匹配属性值attr以value为结尾的元素 E[attr*=value]:匹配属性attr值包含value的元素
块级元素和行内元素
margin/padding:外边距/内边距 margin/padding: top right bottom left; margin外边距是合并的。 块级元素的居中margin: 0 auto; 行内元素的居中text-align: center;
文本
chrome: 设置的最小字体是12px,默认字体是16px 解决最小字体的方法:css中的语法: -webkit-text-transform: scale(0.75) // 原来字体的0.75倍 文本的对齐方式: text-align: left/right/center/justify(两边对齐) 首行缩进:text-indent: 首行缩进的距离 文字样式:text-decoration: none/underline/line-through/overline 改变文字大小:text-transform: none/uppercase(全部大写)/lowercase/capitalize(首字母大写) 改变字(单词)之间的间隔:word-spacing: 字母间隔修改的是字符和字母之间的间隔:letter-spancing: 单行文本溢出用...省略号表示:
字体大小
单位:px,em,rem,vw,vh区别? px是指一个具体的大小长度单位 em是一个相对单位,是相对于父元素的字体大小 rem是一个相对的单位,是相对于根元素的字体大小 vw,vh是一个相对的单位,是相对于视口的大小
隐藏or透明