![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
YoungShiHao
这个作者很懒,什么都没留下…
展开
-
CSS-1-常用Emmett语法快速生成结构代码
1.多个标签<!-- 1.多个标签 --><!-- div * 3 --><div></div><div></div><div></div>2.多个标签并列 <!-- 2.多个标签并列 --> <!-- div + p + span --> ...原创 2019-07-04 15:09:20 · 541 阅读 · 0 评论 -
CSS-15-transition过渡动画
transition过渡动画1.属性1.需要过渡的属性,一般为all,也可以是left,top等.transition-property: all;2.需要过渡的时间,一定要设置的,默认值为0transition-duration: 1s;3.需要过渡的方式,也叫曲线,默认值为ease:由快到慢transition-timing-function: linear; line...原创 2019-07-05 20:43:29 · 631 阅读 · 0 评论 -
CSS-14-定位
1.定位模式1.静态定位的特点(不用了解)定位属性: 默认是静态定位定位的元素,还有另外一套位移手段,边偏移属性: top bottom right left.但是对于静态定位(标准流)来讲边偏移属性有没有作用呢???----没有任何作用.可以把静态定位默认为不是定位即可.2.固定定位的特点1.可以实现模式转换,拥有行内块的特点2.可以脱离标准流,不占据标准流的位置3.不会随着内...原创 2019-07-04 16:51:19 · 218 阅读 · 0 评论 -
CSS-13-浮动
1.float浮动流1.写法: float:left; 左浮动 float:right; 右浮动2.浮动的初衷 浮动一开始不是拿来做布局,而是为了解决文字环绕图片的问题(了解,面试题可能有)强行要求浮动作为一种布局手段3.特点浮动元素,可以实现模式转换,拥有行内块的特点浮动元素,脱离标准流/脱标,不占据标准流的位置,导致后面的标准流会被浮动的遮住 浮动流的层级比标准流高4.浮...原创 2019-07-04 16:45:21 · 225 阅读 · 0 评论 -
CSS-12-初始化代码
为了清除标签原有的一些默认样式最简单的初始化方法:(强烈不推荐,影响性能)* { margin: 0; padding: 0;}淘宝初始化代码body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, text...原创 2019-07-04 16:33:58 · 235 阅读 · 0 评论 -
CSS-11-盒子模型
盒子模型(CSS重点)1.看透网页布局的本质网页布局中,我们是如何把里面的文字,图片,按照美工给我们的效果图排列的整齐有序呢?看透网页布局的本质:首先利用CSS设置好盒子的大小,然后摆放盒子的位置。最后把网页元素比如文字图片等等,放入盒子里面。以上两步 就是网页布局的本质我们明白了,盒子是网页布局的关键点,所以我们更应该弄明白 这个盒子有什么特点。2. 盒子模型(Box ...原创 2019-07-04 16:17:34 · 175 阅读 · 0 评论 -
CSS-10-注释
CSS注释规则:/* 需要注释的内容 / 进行注释的,即在需要注释的内容前使用 "/" 标记开始注释,在内容的结尾使用 "*/"结束。例如:p { /* 所有的字体是14像素大小*/ font-size: 14px; }...原创 2019-07-04 16:01:05 · 222 阅读 · 0 评论 -
CSS-9- 三大特性
1.层叠性当存在多个相同选择器(权重相同),作用在同一个元素身上,发生了属性冲突,后来者居上,后面的属性会覆盖前面的2.继承性存在父子关系的盒子,子元素会继承父元素的部分部分部分属性记住两个特殊标签即可1.a标签不继承颜色2.h系列的标签不继承字体大小3.优先级顺序:继承性 < 通配符 < 标签选择器 < 类选择器 < id选择器 <...原创 2019-07-04 15:59:44 · 238 阅读 · 0 评论 -
CSS-8-背景属性
CSS 背景(background)1.1 背景颜色(color)语法:background-color:颜色值; 默认的值是 transparent 透明的1.2 背景图片(image)语法:background-image : none | url (url) 参数作用none无背景图(默认的)url使用绝对或相对地址指定背景图...转载 2019-07-04 15:55:50 · 200 阅读 · 0 评论 -
CSS-7-标签显示与转换
标签显示模式(display) (重点)三种模式分别为:1.行内元素(inline)特点a.不能设置宽高----宽高由内容决定b.一行显示多个常见的行内元素: span a strong del ins em i .....2.块级元素的特点(block)特点:a.可以设置宽高b.独自占据一行没有设置宽度的块级元素,宽度等于父盒子常见的块级元素: div p h1-h6 ...原创 2019-07-04 15:51:06 · 198 阅读 · 0 评论 -
CSS-6-常见复合选择器
1.后代选择器(重点) 注意:项目一拿到手,不要考虑其他的,直接使用后代选择器选择器名之间用空格隔开后面的选择器名是前面的后代最终效果作用在最后一个元素身上中间的辈分可以省略:3-5个层级即可例子: .father .son .sun {属性名:属性值;} <div class="father"> 父亲 <div class="son"> 儿子...原创 2019-07-04 15:46:12 · 222 阅读 · 0 评论 -
CSS-5-常见基础选择器
1.选择器的作用选择器的作用: 让样式可以作用到目标元素身上2.标签选择器标签选择器: 根据标签名找到目标元素标签名 {属性名: 属性值;……}例子: div { color: red; } <div>哈哈</div>3.类选择器初学者常见的错误就是漏了小点点类选择器,谁使用,谁改变类名可以有多个------多个类名之间用空格隔开类名...原创 2019-07-04 15:43:32 · 111 阅读 · 0 评论 -
CSS-4-文本相关属性
1.color文本颜色三种表示英语单词但是范围太小了,工作中用得不多例子:color: red;单词:red红,blue蓝,green绿,yellow黄,pink粉…rgb方式设置比例的范围: 0-255例子: color: rgb(255,0,0); color: rgb(100%,0%,0%); 都要是百分号才行,否则不行十六进制表示在十六进制中,每两位数代表一个原...原创 2019-07-04 15:40:57 · 143 阅读 · 0 评论 -
CSS-3-font字体属性
1.font-size 文字大小控制文本的大小px作为单位谷歌浏览器默认的字体大小是16px谷歌浏览器默认的最小字体是12pxem单位em是默认字体大小的倍数rem单位 常用于适配移动端rem是相对于页面根元素html字体大小(适配的屏幕/10,下载插件cssrem能进行自动计算)rem是CSS3新引进来的一个度量单位,不兼容IE6-8设置根元素字体vscode----设置...原创 2019-07-04 15:36:05 · 291 阅读 · 0 评论 -
CSS-2-三种引用方式
1.行内式css在工作项目中,用得很少行内式的影响范围: 非常小,只能影响到当前一个标签写在标签的内部书写格式<标签名 style=“属性名1:属性值1; 属性名2:属性值2; 属性名3:属性值3;”>内容</标签名>例子: <div style="color: red; font-size: 12px;"> 这是 </div>...原创 2019-07-04 15:13:31 · 182 阅读 · 0 评论 -
CSS-16-transform属性介绍
transform属性2D转换介绍用法:就是在transform属性的后添加指定的属性值.属性值:1.平移:translate(x,y); xy可以是带px单位的数字,百分比和负值语法:transform:translate(x,y);总结:a.最多只能设置两个值,第一个值表示水平位置(x方向),第二个值表示垂直位置(y方向)b.如果只设置一个值,则表示水平方向c.如果值为负数...原创 2019-07-05 20:56:39 · 782 阅读 · 0 评论