1.隐藏元素 - display:none或visibility:hidden“*”是通配符,在CSS样式里面是代表所有标签,
visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间,虽然被隐藏了,但仍然会影响布局。display:none可以隐藏某个元素,且隐藏的元素不会占用任何空间。
2.重叠的元素
- 元素的定位与文档流无关,所以它们可以覆盖页面上的其它元素z-index属性指定了一个元素的堆叠顺序(哪个元素应该放在前面,或后面)一个元素可以有正数在前或负数在后的堆叠顺序:
- 如果两个定位元素重叠,没有指定z - index,最后定位在HTML代码中的元素将被显示在最前面。clip:rect(top,right,bottom,left);
3.元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用 clear:both; 属性。
4.让 line-height 属性值和 height 属性值相等来设置 div 元素居中
5.list-style-type:none - 移除列表前小标志。
6.“*”是通配符,在CSS样式里面是代表所有标签,
7.径向渐变是从“一个点”向四周的颜色渐变。
其语法如下:background: radial-gradient(center, shape, size, start-color, …, last-color);center:
渐变起点的位置,可以为百分比,默认是图形的正中心。
shape:渐变的形状,
ellipse表示椭圆形,
circle表示圆形。
默认为ellipse,如果元素形状为正方形的元素,则ellipse和circle显示一样。
size:渐变的大小,即渐变到哪里停止,它有四个值。
closest-side:最近边;
farthest-side:最远边;
closest-corner:最近角;
farthest-corner:最远角
8.为a设置text-align属性后 为什么看不出网页中的链接有什么变化
这个text-align:center;是说:超链接a标签内的文字居中对齐;如果超链接a标签没有固定宽度是不会显示居中对齐的;9.a标签会经常使用到,href属性值通常需要给一个空连接1、
2、
3、
10.h5元素垂直居中方法 - 设置padding,上下px设为相同
- 让 line-height 属性值和 height 属性值相等来设置 div 元素居中
- position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%)不知宽高 - position:relective;然后top设置px;
11.position:relative是指元素相对于在文档流中位置进行移动的,而不是以父元素为基准进行移动的。
12.子DIV块中设置margin-top时影响父DIV块位置问题问题:
给一个div内部的div设置一个margin-top,结果它的父级跟着它一起下移了。
解释: 给一个div内部的div设置一个margin-top,结果它的父级跟着它一起下移了。所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。
毗邻的定义为:同级或者嵌套的盒元素,并且它们之间没有非空内容、Padding或Border分隔。
提供这样几种方法: - 让父级具有“包裹性”将父级over-flow设为hidden
- 将父级display设为inline-block将父级float或absolute改变父级的结构给父元素设置padding给父元素设置透明border
13.H5图片显示方式解决方案(图片不变形显示、图片裁剪、自适应)
方案一:当图片高度大于宽度时,将宽度设置为100%,超出的高度隐藏并垂直居中。
方案二:当图片宽度大于高度时,将高度设置为100%,超出的宽度隐藏并水平居中。ps:.imgs写在父块中 。.heightLong写在img里或子块中。
14.text-align: center;div内文本居中,对于span设置起作用必须写在对应父类的div中
15.当盒子有宽高的时候 设置padding会导致盒子宽高变化。。如果盒子没有宽度,它是继承了父亲盒子的宽度100%,所以不会因为设置padding而导致撑开盒子。
16.行内元素和块级元素的区别:
行内元素:与其他行内元素并排不能设置宽高,默认的宽度就是文字的宽度
块级元素:霸占一行,不能与其他任何元素并列。能接受宽高,如果不设置宽度,那么宽度将默认变为父级的100%。
块级元素和行内元素的分类在HTML的角度来讲,
标签分为:
文本级标签:p , span , a , b , i , u ,em 容器级标签:div , h系列 , li , dt ,dd p:里面只能放文字和图片和表单元素,p里面不能放h和ul,也不能放p。
从CSS的角度讲,CSS的分类和上面的很像,就p不一样:
行内元素:除了p之外,所有的文本级标签,都是行内元素。p是个文本级标签,但是是个块级元素。
块级元素:所有的容器级标签,都是块级元素,以及p标签。
17.当div标签的display 为 inline-block;为什么会出现默认的边距?
解决办法:在写代码时 设置为inline-block的标签不添加换行;或者:在标签之间加上注释
18.div中的img和div顶部有一小段距离的处理方法:
方法一:定义图片img标签vertical-align:bottom,vertical-align:middle,vertical-align:top。
方法二:定义容器里的字体大小为0。
原因:图片文字等inline元素默许是和父级元素的baseline对齐的,而baseline又和父级底边有必定间隔(这个间隔和 font-size,font-family 相关),所以设置 vertical-align:top/bottom/text-top/text-bottom 都能够防止这种状况呈现。而且不光li,其他的block元素中包括img也会有这个景象。19.margin-block-start 属性有着和 margin-left 属性一样的值.
20.css3 实现鼠标放上去图片外框架放大