【CSS的再一次深入（更新中···）】的更多相关文章

css的再深入7（更新中···）

1.transparent  透明的 2.placeholder  提示语 写页面 搞清结构层次, 保证模块化,让他们之间不能受到影响 (1) 元素性质 (2) 标准流 浮动带来的脱离文档流撑不起父级的高度的问题可以采用清除浮动的方式消除影响,absolute和fixed带来的脱离文档流撑不起父级的高度,使用子元素设置高强制撑起父级. 1.css可以继承的属性有哪些? Font 系列 text系列 color line-height 2.border-radius的值的问题 四个值的顺序是 左上…

css的再深入6（更新中···）

background-position  雪碧图 我们的html和css中有三个属性可以向服务器发送请求,src href url. overflow (1) 值hidden 超出就隐藏 (2) 值scroll  出现滚动条 visibility:hidden;  可见的 (消失但是占用位置) display:none;消失但不占用位置 为什么使用雪碧图? 因为我们使用雪碧图之后,本来需要多次请求的图片,我们一次就请求过来了,然后使用background-position调位置,从而减少了该页面…

CSS的再深入2（更新中···）

在上一章中,我们又引出了一个知识点: margin的问题 margin:0 auto:(上下为0,左右自适应)会解决元素的居中问题(auto 自适应)前提是给这个元素设置width 同时,我们又要学习新的知识: CSS的两个性质和一个标准 1.继承性:后代会继承父系的一些属性(font系列.color.text系列.line-height),这种现象叫做继承现象. 2.层叠行 (1)选不中的情况下,走继承性.继承性的权重为0. 如果这个元素有多个父级设置了这样的样式,走就近原则,即哪个父级离它最…

css的再深入9（更新中···）

一 单位 1.px 就是一个基本的单位 像素 2.em 也是一个单位 用父级元素的字体大小乘以em前面的数字.如果父级没有就继承上一个父级直到body,如果body没有那就默认是16px. 3.rem 也是一个单位,只跟根节点<html>的字体大小有关,如果没有默认是16px. 4.line-height 行高 line-height:2; 行高值 是当前数字2乘以元素字体大小. 二 浏览器 浏览器和浏览器之间是由差距的,这个差距是由浏览器自身的内核决定的. 每个浏览器都有自己的前缀,主要解决…

CSS的再深入5（更新中···）

页面布局 结构层:搭我们的页面框架. 布局层:针对框架内部结构进行排版. 不需要使用浮动解决的问题尽量不用. 使用浮动之后会使该元素脱标,并且该元素的margin. div 盒子模型 : 就是一个容器,可以装任何标签. 盒子实际占用的空间 盒子的实际宽高和高度 如何理解盒子模型 细节性的问题块级元素的宽如果没有设置宽度,就是父级的宽,如果没有设置高度根据内容而定. 结构选择器 (同一父级下子标签同级同标签名时使用,用法  标签名:nth-of-type(序号/或者说是第几个) div:nth-o…

CSS的再深入3（更新中···）

在前面,我们学习了标准文档流,但在实际制作的过程中,用标准文档流书写显然是不现实的,因此,我们来了解几种脱离标准文档流的方法: 1.float 浮动 float:left/right:(左浮/右浮) 效果:元素都加浮动,后面的元素紧跟前面的元素并排排列 第一个加了float,脱离了标准文档流,对于浏览器来说,第二个元素就变成了标准文档流中的第一个,于是就会把他排在第一位.而第一个依然存在,所以就会叠加. 行级加float A.只要加了float,这个元素就会脱离标准文档流:行级元素加了float…

css的再深入8（更新中···）

1.去滚动条的属性 overflow:hidden; overflow-x:hidden; 水平超出的隐藏. 2.z-index 层次叠加 元素重叠 谁的值大谁在上面 (1) 父级出现position:relative:时候z-index失效 (2) 层叠元素出现float的时候会失效 (3) 层叠元素也得设置position:absolute/fixed. 3.background-position属性的三种属性值: background-position:100px 300px; backg…

css的再深入4（更新中···）

两种居中的方式: Margin:0 auto;和text-align:center; Margin的居中是对自身,text-align对元素内部的文本来说. 隐藏的两种方式: visibility:hidden:和display:none; visibility 隐藏了还占用着空间,display隐藏了之后不占用空间了. Position位置 只要使用定位,必须要有一个相对的参照物.即relative 具体定位的那个元素需要加position:absolute;绝对的 绝对的 :就是具体到某一个…

前端常用场景总结CSS/JS/插件（实用篇更新中...）

<div class="box box1"> <span>垂直居中</span> </div> .box1{ display: table-cell; vertical-align: middle; text-align: center; } .box2{ display: flex; justify-content:center; align-items:Center; } a链接 禁止点击跳转 javascript:void(0);…

css 不大常见的属性(不断更新中...)

1 英语或数字强制换行 word-break:break-all; 2 使用具有回弹效果的滚动, 当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果 -webkit-overflow-scrolling:touch 3 改变input的placeholder的字体颜色 input::-webkit-input-placeholder{color:#999;} input:focus::-webkit-input-placeholder{color:#999;} 4 某一行出现省略号 disp…