![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
网页布局
沉沦与遐想。
余生是你,满心欢喜
展开
-
position position有几个属性 绝对定位 相对定位 固定定位 z-index
定位(position)概念将盒子定在某一个位置(最上层)标准流在最底下 — 浮动中间 — 定位最上层静态定位(static)静态定位是元素默认的定位方式,无定位的意思。它相当于border中的none静态定位是按照标准流特性摆放位置,它没有边偏移相对定位(relative)相对定位是元素对于它 原来在标准流中的位置来说的原来在标准流的区域继续占有,后面的盒子依然以标准流的方式对待它绝对定位(absolute)绝对定位 是元素以带有 定位的父原创 2020-09-14 09:58:04 · 683 阅读 · 0 评论 -
css隐藏元素的几种方式及区别 display:none visibility:hidden opacity 元素隐藏
元素的显示和隐藏display:none元素在页面上将彻底消失,元素本来占有的空间就会被其他元素占有,也就是说它会导致浏览器的重排和重绘,并且不会触发它的点击事件。visibility:hidden元素在页面消失后,其占据的空间依旧会保留着,所以它只会导致浏览器重绘而不会重排,也无法触发它的点击事件opacity:0将元素的透明度设置为0后,也可以视为一种隐藏,这算是一种隐藏元素的方法。和visibility:hidden的一个共同点是元素隐藏后依旧占据着空间,但我们都知道,设置透明度为0后,元原创 2020-09-10 09:56:49 · 2029 阅读 · 1 评论 -
弹性布局flex 伸缩布局 flex布局 什么是弹性布局 justify-content
弹性布局(flex布局、伸缩布局)一、什么是弹性布局flex 是 flexible Box 的缩写,意为“弹性布局”,用来为盒模型提供最大的灵活性,任何一个容器都可以指定为flex布局注:当我们为父盒子设置弹性布局后,子元素的 float 、 clear 和 vertical-align 属性将失效.box{ display: flex;}.box{ display: inline-flex;}/*Webkit 内核的浏览器,必须加上-webkit前缀。*/.box{ di原创 2020-09-04 15:05:10 · 2892 阅读 · 4 评论 -
div水平垂直居中 div相对于父元素水平垂直居中 div相对于网页水平垂直居中
div相对于父元素水平垂直居中(相对网页水平垂直居中在下面)弹性布局父元素作为容器设置宽高、弹性布局、水平轴和交叉轴居中display:flex;justify-content:center;align-items:center;使用CSS3 transform 和 绝对定位父元素有宽高设置相对定位position:relative;子元素设置position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);原创 2020-09-03 09:57:11 · 1447 阅读 · 4 评论 -
外边距溢出解决方法 高度塌陷如何解决
外边距溢出描述父元素没有上边框(border-top)或者没有上内边距(padding-top)给子元素设置上外边距,会作用到父元素上 <style type="text/css"> #parent{ width: 300px; height: 300px; background-color: gray; } #child{ width: 150px; height: 150px; background-colo原创 2020-09-02 10:04:37 · 1650 阅读 · 2 评论 -
常见块级元素行内元素行内块元素的特点和区别
标签的显示模式块级元素常见的块级元素<h1>~<h6>、<p>、<div>、<ul>、<ol>块级元素的特点(1) 独占一行(2) 高度,宽度,外边距以及内边距都可以控制(3) 宽度默认是容器的宽度的100%(4) 是一个容器及盒子,里边可以放行内或者块级元素注:只有文字才能形成段落和标题,所以 p 和 h*中不能放块级元素行内元素常见的行内元素<a>、<strong>原创 2020-09-01 09:03:38 · 1594 阅读 · 2 评论 -
什么是盒子模型,盒子模型,标准盒模型,怪异盒模型,两种盒模型的区别,box-sizing属性
什么是盒子模型CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。盒子模型(Box Modle)可以用来对元素进行布局,包括实际内容,内边距,边框,外边距这几个部分。盒子模型分为两种:第一种是W3C标准的盒子模型(标准盒模型)第二种IE标准的盒子模型(怪异盒模型)标准盒模型与怪异盒模型的表现效果的区别之处:1、标准盒模型中width指的是内容区域content的宽度;height指的是内容区域content的高度W3C标准盒模型下盒子的大小 = width (原创 2020-08-31 14:14:03 · 3093 阅读 · 4 评论