CSS
-
元素居中总结
-
水平居中
-
块状元素
-
将该块级元素左右外边距margin-left和margin-right设置为auto .child{ 100px;//确保该块级元素定宽 margin:0 auto; }
-
-
行级元素
-
利用 text-align: center 可以实现在块级元素内部的行内元素水平居中。此方法对inline、inline-block、inline-table和inline-flex元素水平居中都有效。 .parent{//在父容器设置 text-align:center; } 弹性盒子中的水平居中 将某元素定义为弹性盒子:display:flex; 然后在水平方向居中盒子内的元素:justify-content:center;
-
-
-
垂直居中
-
块状元素
-
#
-
-
行级元素
-
对该行内元素的父元素设置line-height与height相同:比如父元素div的height为50px,则设置:inline-height:50px; 设置行内元素vertical-align:middle
-
-
-
水平垂直居中
-
定宽高块状元素水平垂直居中
1. 子绝父相 2. 先设置元素绝对定位 3. 然后top left设置50% 4. 最后根据宽高设置margin负的像素
-
不定宽高块状元素水平垂直居中
方法一
子绝父相
先设置元素绝对定位
然后top bottom left right都设置为0
最后margin设置auto方法二
子绝父相
先设置元素绝对定位
然后top left设置50%
根据transform:translate属性设置方法三
给父元素设置display:flex
align-items:center定义父元素的子元素垂直居中
justfiy-content: center定义父元素的子元素水平居中 -
-
居中完结篇(https://mp.weixin.qq.com/s/GU53AdyXk1H5KBotBHUGEA)
-
-
盒子模型的理解
-
所有HTML元素可以看作盒子,一个盒子包括了content(实际内容)、border(边框)、padding(内边距)和margin(外边距)
-
其实盒模型有两种,分别是ie盒子模型(IE6以下版本浏览器)和标准w3c盒子模型,区别在于前者content的宽度和高度包括了border和padding。margin(外边界)虽不可见,但是它确实在文档中占据了空间,我们要区分两个概念即:盒子所占空间(计入margin )和盒子实际的大小(不计入margin) 。
-
box-sizing有三个取值:
1、content-box:使元素遵循标准 w3c 盒子模型(默认值)。
2、border-box:使元素遵循ie 盒子模型。
3、 inherit: 规定应从父元素继承 box-sizing 属性的值。
-
-
浮动的理解
-
浮动 影响 方法 父元素高度塌陷 给父元素添加伪元素 影响后续相邻兄弟元素 再后续相邻兄弟元素前加一个空div:clear:both
-
-
margin和padding理解区别
- 相同点
- 复合值
- 可以取4个值
- 取值顺时针规律
2.不同点margin
- 间距重叠,取大值
- 给子元素设置上下外边距时父元素会塌陷
- 1给父元素加个边框border-颜色可以取本身颜色,也可以取背景颜色,但是大小会变化
- 2给父元素添加属性overflow:hidden,涉及到BFC机制
- 相同点
-
文字基线
- 图片是以文字基线对齐的,不会对text-align生效果,必须给图片添加vertical-align: middle
-
外边距合并
- 给子元素设置上下外边距时父元素会塌陷,给父元素添加属性overflow:hidden
-
Overflow
-
CSS overflow 属性用于控制内容溢出元素框时显示的方式。
CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。
-
值 描述 visible 默认值。内容不会被修剪,会呈现在元素框之外。 hidden 内容会被修剪,并且其余内容是不可见的。 scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 inherit 规定应该从父元素继承 overflow 属性的值。 -
注意:overflow 属性只工作于指定高度的块元素上。
注意: 在 OS X Lion ( Mac 系统) 系统上,滚动条默认是隐藏的,使用的时候才会显示 (设置 "overflow:scroll" 也是一样的)。
-
-
网格布局Grid
-
几个易混淆的css属性
-
transform
translate
transition
animation
overflow
outline
Display display:none可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。
Visibility visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。
-
-
CSS3 弹性盒子(Flex Box)
-
%,vh,vw,px,em,rem的区别
-
px 绝对单位,页面按精确像素展示,px就是pixel的缩写,意为像素。px就是设备或者图片最小的一个点,比如常常听到的电脑像素是1024x768的,表示的是水平方向是1024个像素点,垂直方向是768个像素点。是我们网页设计常用的单位,也是基本单位。通过px可以设置固定的布局或者元素大小,缺点是没有弹性。 em em的值并不是固定的; em会继承父级元素的字体大小。相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。 rem rem是相对于根元素html,这样就意味着,我们只需要在根元素确定一个参考值,可以设计HTML为大小为10px,到时设置1.2rem就是12px.以此类推。优点是,只需要设置根目录的大小就可以把整个页面的成比例的调好。
相对单位,可理解为”root em”, 相对根节点html的字体大小来计算,CSS3新加属性,chrome/firefox/IE9+支持。
(另外需注意chrome强制最小字体为12号,即使设置成 10px 最终都会显示成 12px,当把html的font-size设置成10px,子节点rem的计算还是以12px为基准,所以网上很多文章提到的将html的font-size设为10方便计算不是那么可取)。% 1、对于普通定位元素就是我们理解的父元素 2、对于position: absolute;的元素是相对于已定位的父元素 3、对于position: fixed;的元素是相对于ViewPort(可视窗口), vwvh css3新单位,view width的简写,是指可视窗口的宽度。假如宽度是1200px的话。那10vw就是120px, css3新单位,view height的简写,是指可视窗口的高度。假如高度是1200px的话。那10vh就是120px
-
-
CSS中的继承
- 子元素继承父元素的样式,但是并不是所有属性都是默认继承的。
- 通过文档中的 inherited:yes 来判断属性是否可以继承,关于继承可以参见css的继承关键字:
-
display:none和visibility:hidden的异同点
-
css定位的理解
-
媒体查询原理
-
移动端布局方案
-
css选择器
(1)id选择器(#myid) (2)类选择器(.myclassname) (3)标签选择器(div,h1,p) (4)后代选择器(h1 p) (5)相邻后代选择器(子)选择器(ul>li) (6)兄弟选择器(li~a) (7)相邻兄弟选择器(li+a) (8)属性选择器(a[rel="external"]) (9)伪类选择器(a:hover,li:nth-child) (10)伪元素选择器(::before、::after) (11)通配符选择器(*)
-
伪类与伪元素的区别
css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说,伪类和伪元素是用来修饰不在文档树中的部分,比如,一句话中的第一个字母,或者是列表中的第一个元素。 伪类用于当已有的元素处于某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。比如说,当用户悬停在指定的元素时,我们可以通过:hover来描述这个元素的状态。 伪元素用于创建一些不在文档树中的元素,并为其添加样式。它们允许我们为元素的某些部分设置样式。比如说,我们可以通过::before来在一个元素前增加一些文本,并为这些文本添加样式。虽然用户可以看到这些文本,但是这些文本实际上不在文档树中。 有时你会发现伪元素使用了两个冒号(::)而不是一个冒号(:)。这是CSS3的一部分,并尝试区分伪类和伪元素。大多数浏览器都支持这两个值。按照规则应该使用(::)而不是(:),从而区分伪类和伪元素。但是,由于在旧版本的W3C规范并未对此进行特别区分,因此目前绝大多数的浏览器都支持使用这两种方式表示伪元素。
-
超链接访问过后的hover样式就不出现,原因及解决方法
- 被点击访问过的超链接样式就不再具有hover和active了,解决办法就是改变css属性的排列顺序LVHA