css
厕所打你
这个作者很懒,什么都没留下…
展开
-
记录一种常见的布局(三栏之间有两个等距离空隙)
代码:<!DOCTYPE html><html><head> <style> * { box-sizing: border-box; } .container { display: flex; justify-content: space-between; width: 800px; margin: 0 auto; border-top: 1px s原创 2021-01-08 21:08:20 · 120 阅读 · 0 评论 -
待解决:如何让一个浮动元素垂直居中?
在父元素高度未知的情况下,如何让浮动的子元素垂直居中?如果存在两个浮动的子元素,如何让其中一个垂直居中,而另一个不变动呢?原创 2021-01-07 21:01:34 · 372 阅读 · 0 评论 -
水平垂直居中(文本、盒子)
盒子居中,flex方式。设置于flex容器的属性:(1)justify-content: 水平方向的对齐方式。(2)align-items: 垂直方向的对齐方式。设置于flex容器子元素的属性:(1)flex-grow: 默认值为0,即不放大。所有子元素值为1时,子元素平分剩余空间(如果有的话)。如果某个子元素值为2,其他子元素值为1,则前者比其他子元素多分的空间是其他的两倍(2)flex-shrink:默认值为1。空间不足时,如果所有子元素的值都设置为1,都将等比例缩小;如果某个子元素设置为0原创 2021-01-04 10:42:50 · 95 阅读 · 0 评论 -
flex(待完善)
flex内容比较多,先记录了目前使用到的一些属性,后续用到会继续完善。设置于flex容器的属性:(1)justify-content: 水平方向的对齐方式。(2)align-items: 垂直方向的对齐方式。设置于flex容器子元素的属性:(1)flex-grow: 默认值为0,即不放大。所有子元素值为1时,子元素平分剩余空间(如果有的话)。如果某个子元素值为2,其他子元素值为1,则前者比其他子元素多分的空间是其他的两倍(2)flex-shrink:默认值为1。空间不足时,如果所有子元素的值都设原创 2021-01-04 08:57:21 · 171 阅读 · 0 评论 -
CSS实现三栏布局
1、inline-block方式代码:<!DOCTYPE html><html><head> <style> * { box-sizing: border-box; } body { background-color: rgb(218, 247, 67); } .container { width: 1000px; margin: 0 auto;原创 2021-01-01 16:17:21 · 143 阅读 · 0 评论 -
BFC
一、定义一个盒子只要满足以下条件之一:(1)float:left、right(2)position: absolute、fixed(3)display:inline-block、table-cell、flex、table-caption、inline-flex(4)overflow: hidden、scroll、auto(5)body根元素就会触发bfc,就可以称这个盒子为一个bfc容器,那么一个bfc容器有什么特点呢?二、bfc特性1、独立性bfc容器是一个独立容器,容器里的子元素不原创 2021-01-01 12:00:24 · 600 阅读 · 6 评论 -
两种盒模型
1、标准盒模型元素的width=内容的width。2、IE盒模型元素的width=内容的width+padding+border。3、切换两种盒模型方法box-sizing: content-box;//标准盒模型(默认)box-sizing: border-box;//IE盒模型原创 2020-12-31 21:14:18 · 299 阅读 · 0 评论 -
伪类和伪元素
1、伪类作用于元素整体,可以通过类替代<p>hello world</p>现在要让p中内容变为红色:采用类的方式:p.red { color: red; }<p class="red">hello world</p>伪类:p:first-child { color: red; }2、伪元素作用于元素的内容,可以通过添加新元素代替<p>hello world</p>现在要让p中的首字母变为红色:添加新原创 2020-12-31 16:21:45 · 102 阅读 · 0 评论 -
元素定位
1、相对定位,无论移动与否,元素仍然占据原来的空间,并且移动后会覆盖其他的元素。2、绝对定位,元素不再占据文档的空间,相当于从文档流里删除了,绝对定位相对于最近的已经定位的祖先元素。绝对定位的百分比数值是相对于其已经定位的祖先元素的width、height。3、z-index属性值越大,越优先显示。4、行内元素相对定位后,仍不能设置宽高,并且垂直方向的margin和padding也仍不起作用;但是绝对定位后可以。...原创 2020-12-30 23:49:43 · 301 阅读 · 0 评论 -
内边距和外边距的百分比数值
内边距和外边距的百分比数值是相对于其父元素的width计算的。代码:<!DOCTYPE html><html><head> <style> .a { width: 200px; height: 200px; border: 1px solid black; } .b { width: 50px; height: 50px; padding: 10%;原创 2020-12-30 22:02:39 · 291 阅读 · 0 评论 -
子元素浮动对父元素的影响
文章目录前言1.父元素不浮动时2.父元素也浮动时3.小结前言我们都知道子元素浮动会导致父元素高度坍塌,子元素和父元素都浮动的话,父元素还会出现高度坍塌的情况吗?1.父元素不浮动时首先我们设置三个盒子a、b、c,分别为爷爷元素、父元素、子元素。c浮动,a、b不浮动。代码:<!DOCTYPE html><html> <head> <style> .a { width: 300px; ..原创 2020-12-30 15:12:35 · 2093 阅读 · 1 评论 -
对行内元素设置padding和margin不起作用
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一、对行内元素设置padding和margin二、使用步骤1.引入库2.读入数据总结前言 看了表严肃表哥的电商网站项目,自己动手亲自实现了一遍,前前后后遇到了几个问题,特此总结一下。一、对行内元素设置padding和margin代码:<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="原创 2020-12-29 23:23:07 · 1261 阅读 · 0 评论