CSS
关注
分享
扫一扫
文章平均质量分 66
亦是木子也是雨
一个记笔记的地方
展开
-
三栏布局实现的几种方式
文章目录说明1、利用浮动2、利用绝对定位3、利用 flex 布局圣杯布局方式一：利用浮动和定位实现方式二：利用 flex 实现双飞翼布局完整代码说明三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局，一共有如下五种方式实现left 为300px，right 为200px1、利用浮动原理：浮动元素脱离文档流html结构<div class="wrapper"> <div class="left"></div> <div class原创 2020-11-27 22:52:27 · 1185 阅读 · 2 评论 -
css常见隐藏元素的方法
1、使用 display：none隐藏元素，隐藏后该元素不会在页面中占据位置，也不会响应绑定的监听事件2、使用visibility:hidden隐藏元素，隐藏后该元素会在页面中占据位置，但是不会响应绑定的监听事件3、使用 optaicy：0隐藏元素，隐藏后该元素会在页面中占据位置，会响应绑定的监听事件4、通过绝对定位将元素移除到可视区域外5、通过 translate: scale(0, 0)，来缩放该元素，以实现隐藏。元素会在页面中占据位置，但是不会响应绑定事件<!DOCTYPE htm.原创 2020-11-27 18:12:22 · 356 阅读 · 0 评论 -
常见元素居中的五种方法
块元素，且宽和高已知<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0原创 2020-06-08 19:03:43 · 7408 阅读 · 0 评论 -
css文本处理溢出的处理方法
display: -webkit-box;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: 2;原创 2020-03-10 23:48:58 · 430 阅读 · 0 评论 -
实现两栏布局的几种方式
什么是布局布局简单来说就是如何排列页面中各部分的内容那么，如何排列呢？页面中常见的布局单列布局等宽的单栏布局中间内容略窄的单栏布局两栏布局（一遍定宽、另一边自适应）通过 float + overflow 来实现通过 position 实现通过 float + calc 来实现通过 flex 来实现三栏布局（左右两边定宽、中间内容自适应）通过 float 来...原创 2019-12-11 17:45:47 · 1037 阅读 · 0 评论 -
css3弹性盒子
弹性盒子CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。弹性盒子内容弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。弹性容器内包含...原创 2019-08-01 16:18:15 · 1893 阅读 · 4 评论 -
CSS属性值的计算
CSS属性值的计算过程（即页面的渲染过程）了解一下浏览器如何渲染页面一个元素一个元素依次渲染，顺序按照页面文档的树形目录结构进行渲染每个元素的前提条件该元素的所有CSS属性都必须要有值属性值的计算过程一个元素从所有属性都没有值，到所有的属性都有值,这个计算过程，叫做CSS属性值计算过程声明冲突多个CSS样式,多次应用到同一个元素层叠解决声明冲突的过程，浏览器自动处理(按权重计...原创 2019-07-26 22:21:13 · 1205 阅读 · 0 评论 -
CSS常见的几种选择器
CSS选择器1.基本选择器（1）标签选择器直接引用HTML5标签名称举例如下：<style type="text/css"> h1{ font-size: 17px; color: red; } p{ font-size: 14px; color: yellow; }</style></head><body>...原创 2018-12-23 01:32:48 · 898 阅读 · 0 评论 -
css引入方式及权重
上一篇写了css选择器，那么当许多样式修饰同一元素时，浏览器会作何选择呢？这就涉及到了css选择器的权重问题，具体如下：css权重主要是由数值决定的，具体对应数值如下：选择器类型数值！importantInfinity行间样式1000id100class 伪类10标签 伪元素1通配符0那么，如何理解呢？我是这样理解的：元素...原创 2018-12-29 16:42:17 · 903 阅读 · 1 评论