CSS
文章平均质量分 56
二九君
这个作者很懒,什么都没留下…
展开
-
CSS样式优先级(重置版)
一、先来看到面试题.red p{ color: red ; // 红色}.blue p{ color: blue ; // 蓝色}<div class="red "> <div class="blue "> <p>我是什么颜色?</p> </div></div> <div class="blue "> <div class="red "> &原创 2021-05-08 16:32:20 · 257 阅读 · 0 评论 -
BFC块级格式化上下文
BFC规定了内部的Block Box如何布局BFC的布局规则:内部的Box会在垂直方向,一个接一个地放置。Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。每个盒子(块盒与行盒)的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。BFC的区域不会与float box重叠。BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如原创 2021-02-28 20:09:51 · 92 阅读 · 0 评论 -
CSS3中伪类和伪元素
伪类和伪元素:根本区别在于它们是否创造了新的元素(抽象)1.伪类:用于向某些选择器添加特殊的效果(没有创建新元素):last-child /* 选择元素最后一个孩子 */:first-child /* 选择元素第一个孩子 */:nth-child(1) /* 按照第几个孩子给它设置样式 */a:link {color: #FF0000} /* 未访问的链接 */a:visited {color: #00FF00} /* 已访问的链接 */a:hover {color: #FF00FF} /*原创 2021-02-28 12:40:32 · 117 阅读 · 0 评论 -
CSS实现一个三角形
实现思路:给一个div设置宽度和高度都为0px,然后设置border的样式和和宽度,将border其他三边的样式改为transparent。实现代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"原创 2021-02-27 19:43:57 · 351 阅读 · 0 评论 -
CSS中link和@import的区别
直接上代码:<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" rev="stylesheet" href="myCss.css" type="text/css" > <style type="text/css" > @import url("./myCss.css"); </style> <原创 2021-02-27 19:20:13 · 182 阅读 · 0 评论 -
px、rem、em的区别与联系
一、区别:1. px是固定的像素,一旦设置了就无法因为适应页面大小而改变。2. em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定死了的,更适用于响应式布局。3.em是相对于其父元素来设置字体大小的,一般都是以<body>的“font-size”为基准。这样就会存在一个问题,进行任何元素设置,都有可能需要知道他父元素的大小。而rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个参考值。总之em相对于父元素,rem相对于根元素。二、原创 2021-02-26 22:27:01 · 10805 阅读 · 0 评论 -
CSS3中的box-sizing
box-sizing 是用于告诉浏览器如何计算一个元素是总宽度和总高度盒子的四个组成区域相对应,每个盒子有四个边界:内容边界 Content edge、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。标准盒模型 box-sizing: content-boxcontent-box:width = content width;height = content heightIE盒模型 box-sizing: border-box原创 2021-02-23 17:37:04 · 137 阅读 · 0 评论 -
CSS实现三栏布局(左右固定,中间自适应)的几种方式
一、浮动布局(float) <div class="parent"> <div class="left"></div> <div class="right"></div> <div class="center"></div> </div> .parent { width: 100%;原创 2021-02-23 16:42:58 · 413 阅读 · 0 评论 -
CSS中五种定位及元素的层级
一、定位(position): 定位是一种更加高级的布局手段 通过定位我们可以将一个元素摆放到页面的任意位置 使用position属性来设置定位 可选值: static:默认值 元素是静止的 没有开启定位 relative:开启元素的相对定位 相对定位的特点: 1.元素开启相对定位以后 如果不设置偏移量(offset) 元素不会发生任何变化 通过偏移量设置元素的位置: top原创 2020-11-02 23:05:33 · 3511 阅读 · 0 评论 -
CSS实现水平垂直居中的10种方式(定宽高和不定宽高)
一、居中元素定宽高1.absolute + 负margin假设HTML代码如下,总共两个元素,父元素和子元素(带有size代表定宽高的子元素)<div class="wp"> <div class="box size">123123</div></div>公用CSS代码如下:.wp { border: 1px solid red; width: 300px; height: 300px;}.box {原创 2021-02-20 16:18:02 · 1262 阅读 · 1 评论 -
CSS中弹性盒布局(flex)
一、弹性盒(flex)flex(弹性盒/伸缩盒) 是CSS中又一种布局手段,他主要用来代替浮动来完成页面的布局 flex可以使元素具有弹性,让元素可以根据页面大小改变而改变 弹性容器 要使用弹性盒,必须先将一个元素设置为弹性容器 我们可以通过display来设置弹性容器 display:flex 设置为块级弹性容器 display:inline-flex 设置为原创 2020-11-10 11:16:10 · 529 阅读 · 0 评论 -
CSS盒子模型和水平、竖直方向的布局
一、CSS 盒子模型(Box Model)所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model):![盒子模型](https://img-blog.csdnimg.cn/20201102104800910.png?x-oss- process=image/w原创 2020-11-02 11:07:41 · 2588 阅读 · 0 评论 -
CSS——display:none、visibility:hidden、opacity:0三者的区别
一、display: noneDOM结构:浏览器不会渲染 display 属性为 none 的元素,不占据空间;事件监听:无法进行 DOM 事件监听;性能:动态改变此属性时会引起重排和重绘,性能较差;继承:不会被子元素继承,毕竟子类也不会被渲染;transition:transition 不支持 display。二、visibility: hiddenDOM结构:元素被隐藏,但是会被渲染不会消失,占据空间;事件监听:无法进行 DOM 事件监听;性能:动态原创 2021-02-08 23:17:28 · 345 阅读 · 0 评论