![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
辉娜
这个作者很懒,什么都没留下…
展开
-
margin边界重叠问题及解决方案
<style> .root { width: 300px; height: 300px; background-color: beige; /* 第一种方案 */ /* position: absolute; */ /* 第二种方案 */ /* overflow: hidden; */ ...原创 2021-10-19 19:56:50 · 123 阅读 · 0 评论 -
css清楚浮动的四种方式
一、父元素设置overflow:hidden<style> .outer { background-color: cornflowerblue; /* 父元素设置这个属性 */ overflow: hidden; } .inner { width: 150px; height: 150px; .原创 2021-10-19 15:30:03 · 76 阅读 · 0 评论 -
height:100%和height:inherit的异同
1. 兼容性差异height:100%IE6+√height:inheritIE8+√2. 大多数情况作用是一样的除去兼容性,大多数情况下,两者作用是一样的,甚至都很难想出不一样的理由。① 父容器height: auto,无论height:100%或者height:inherit表现都是auto.② 父容器定高height: 100px,无论height:100%或者height:inherit表现都是100px高.难道没有差异吗?难道没有使用height:inherit的理由吗?当...转载 2021-10-11 22:09:50 · 394 阅读 · 0 评论 -
css实现垂直与水平居中
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.原创 2021-10-07 17:19:24 · 60 阅读 · 0 评论 -
flex:1和flex:auto详解
首先明确一点是, flex 是 flex-grow、flex-shrink、flex-basis的缩写。flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。转载:flex:1和flex:auto详解.转载 2021-10-04 16:52:26 · 468 阅读 · 0 评论 -
CSS 实现盒子水平居中、垂直居中和水平垂直居中的方法
CSS 实现盒子模型水平居中水平居中效果图如下:HTML:CSS 全局样式:方法一:使用margin: 0 auto;(只适用于子盒子有宽的时候)方法二:text-align + display(子盒子有或没有宽度的时候都适用)方法三:position 定位(只适用于子盒子有宽度和高度的时候)方法四:position + transform(子盒子有或没有宽高的时候都适用)方法五:flex 布局(弹性布局)(子盒子有或没有宽高的时候都适用).原创 2021-09-19 10:32:03 · 340 阅读 · 0 评论 -
FLEX布局
这有一篇博客介绍的很详细:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html转载 2021-08-30 17:12:30 · 57 阅读 · 0 评论 -
浅析前端中常使用的src和href的区别
src 用于替换当前元素,href 用于在当前文档和引用资源之间确立联系。src 是 source 的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在 位置;在请求 src 资源时会将其指向的资源下载并应用到文档内,例如 js 脚本,img 图片 和 frame 等元素。 <script src =”js.js”></script> 当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行 完毕,图片和框架等元素也如此,类似于将所指..原创 2021-08-24 13:01:01 · 1195 阅读 · 0 评论 -
css的盒子模式
盒子的四个基本内容:box-sizing(盒子模式)1. 内容盒子(普通盒子 , 默认盒子) content-box; 盒子实际占据的宽度 : 2borderWidth + 2padding + width 盒子实际占据的高度 : 2borderWidth + 2padding + height2. 边框盒子(怪异盒子 ie低版本) border-bo...原创 2021-10-14 15:32:31 · 205 阅读 · 0 评论 -
css布局
css的布局有四大类:默认文档流、浮动布局、伸缩盒布局、定位布局 特点 坐标轴 扩展 默认文档流 块元素, 独占一行空间,高度由内容决定。块元素默认从上往下排列 y 浮动布局 1) 脱离文档流 2) 块元素的宽度不再是100%,由内容决定 3) 块元素不再支撑其父元素 4)原创 2021-08-23 22:06:27 · 81 阅读 · 0 评论 -
css选择器优先级及引入方式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g...原创 2021-08-23 19:15:10 · 72 阅读 · 0 评论 -
css选择器
一、css选择器可以分为五大类核心选择器 层次选择器 属性选择器 伪类选择器 伪元素选择器选择器类别 核心选择器 id、class、标签、并且、和、普遍选择器 层次选择器 子选择器、后代选择器、兄弟选择器 属性选择器 常用表单元素(不常用)类似正则表达式 伪类选择器 :hover 、:visited 伪元素选择器 ::after 、::before 1)核心选择器(标签、并且、普遍选择器)<!DOCTYPE html>..原创 2021-08-23 19:04:14 · 201 阅读 · 0 评论 -
css隐藏html元素的方法
1)visibility: hidden是许多人在隐藏某个HTML元素时的首选。如页面中图片不见了,但是也没中原来图片的位置留下了一片空白区域。这个属性只是简单的隐藏某个元素,但是元素占用的空间任然存在。 设置visibility: visible可以使隐藏的元素变为可见。 2)设置opacity: 0可以使一个元素变得完全透明,从而制作出和visibility: hidden一样的效果。opacity和visibility相比,其优势在于它可以被transition...原创 2021-08-23 18:06:28 · 73 阅读 · 0 评论