html&css
文章平均质量分 86
前端基础内容,css布局方面的一些内容
不爱编程的小方
一个屯笔记的地方,很多都是网上的资料总结,供自己快速查阅
展开
-
flex布局
flex布局一、什么是flex布局 Flex 是 Flexible Box缩写,意为“灵活的盒子”或“弹性的盒子”,所以flex布局一般也叫弹性布局二、什么是flex容器(flex container)? 采用flex布局的元素,称为flex容器三、什么是flex项目(flex item)? flex 容器的所有子元素自动成为容器成员,称为flex项目(注意:孙子元素不会成...原创 2019-11-25 17:21:19 · 1947 阅读 · 3 评论 -
过渡&2D变换&动画
过渡/*默认值:*/transition-delay: 0stransition-duration: 0stransition-property: alltransition-timing-function: ease/*简写,推荐书写顺序如下*/ transition:transition-duration transition-property transition-timing-function transition-delay transition-duration属性:以秒或原创 2021-04-11 14:28:43 · 127 阅读 · 0 评论 -
图片水平垂直居中
图片水平垂直居中(内联元素 = 伪文本)1、水平居中:给父元素加text-align:center2、垂直居中:在图片img前或后加一个span,给span添加声明height:100%;display:inline-block;使span以中线对齐,添加声明vertical-align:middle使img以中线对齐,添加声明vertical-align:middle...原创 2020-07-08 10:23:11 · 244 阅读 · 0 评论 -
CSS垂直水平居中
1、position:absolute;left:50%;top:50%;margin-left:-(width/2)px;margin-top:-(height/2)px;2、position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;3、position:absolute;left:50%;top:50%;tranform:translate(-50%,-50%);4、position:absolute;left:50%;top:50%;原创 2020-07-08 09:14:03 · 116 阅读 · 0 评论 -
伪类选择器和伪元素
伪类选择器伪类选择器有以下6种:动态伪类:锚点伪类用户行为伪类目标伪类UI元素状态伪类否定伪类选择器语言伪类选择器CSS3结构伪类动态伪类这些伪类并不存在于HTML中,只有当用户和网站交互的时候才能体现出来锚点伪类 link visited hover active(一定要按照这个顺序写)用户行为伪类 hover active focus目标伪类用于命名锚记<!DOCTYPE html><html lang="en">原创 2020-07-02 17:13:35 · 212 阅读 · 0 评论 -
响应式布局原理
什么是响应式布局一种网站兼容多种终端对不同屏幕尺寸(大小)做出响应,并进行相应布局的一种移动Web开发方式以下有两种响应式布局,仔细读懂其中的代码,你也就掌握了响应式布局的原理了。(代码有很多重复的地方,只是看起来很长,内容并不多)grid.css.container { width: 100%; padding-left: 15px; padding-right...原创 2020-02-25 12:22:12 · 294 阅读 · 0 评论 -
CSS选择器和CSS3选择器
文章目录CSS导入方式css导入方式优先级CSS选择的艺术标签选择器类选择器ID选择器群组选择器全局选择器后代选择器伪类选择器CSS继承和层叠CSS权重CSS命名规范CSS3选择器基本选择器子元素选择器相邻兄弟元素选择器通用兄弟选择器群组选择器属性选择器Element[attribute]Element[attribute=“value”]Element[attribute~=“value”]El...原创 2020-01-09 16:52:48 · 206 阅读 · 0 评论