css
一码哥
这个作者很懒,什么都没留下…
展开
-
什么是BFC,BFC能干嘛
BFC: 我的理解:触发BFC,即新建BFC环境,互相之间就不再影响(独立) W3C对BFC的定义如下: 浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为"visiable"的块级盒子,都会为他们的内容创建新的BFC(Block Fromatting Context, 即块级格式上下文)。 布局规则如下: 1.内部的盒子会在垂直方向,一个一个...原创 2020-08-18 17:55:47 · 302 阅读 · 0 评论 -
史上最全圣杯布局(转自前端神三元)
圣杯布局如图: 而且要做到左右宽度固定,中间宽度自适应。 #1.利用flex布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .header,.footer{转载 2020-08-18 17:02:48 · 1344 阅读 · 1 评论 -
css 最简单的解释 品字布局
1.第一个元素使用margin:0auto居中 2.第二三元素浮动,并且使用transform,位移x轴自身宽度100% 3.全屏版为下面两个元素各占50%,浮动或者inline-block <!doctype html><html> <head> <meta charset="utf-8"> <title>品字布局</title> <style> * { margin: ..原创 2020-08-18 17:00:19 · 264 阅读 · 0 评论 -
css 最简单的解释 双飞翼布局
1.使三元素左浮动 2.center的width为100% 3.left的margin-left为-100%(父元素的100%),就跑到上面去了,right的margin-left:-本身width,跑到上面的末尾去了 4.content的margin左右为两个侧边栏的width(为内容留下位置) <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta.原创 2020-08-18 16:57:44 · 260 阅读 · 2 评论 -
css布局=>div垂直居中,左右10px,高度始终为宽度一半
问题描述: 实现一个div垂直居中, 其距离屏幕左右两边各10px, 其高度始终是宽度的50%。同时div中有一个文字A,文字需要水平垂直居中 方法一:利用height:0; padding-bottom: 50%; <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-.原创 2020-08-13 15:30:05 · 2499 阅读 · 0 评论 -
css=>清除浮动,解决图片留白,元素留白问题
二.浮动: 1..清除浮动的方法: 1.额外标签法,在元素后添加额外标签,并且设置clear:both 2.设置父元素的overflow为hidden(触发BFC)或者设置父元素高度 3.使用伪元素选择器清除浮动 .parent:after{ content:''; display:block; height:0; visibility:hidden; clear:both; } 4.使用双伪元素清除浮动 .clearfix:...原创 2020-08-13 11:43:55 · 701 阅读 · 0 评论 -
妈妈再也不用担心我的布局了----总结最常用的css水平和垂直布局,
水平居中: 行内元素:0 .父元素:text-align:center 确定宽度: 1.父元素:position:relative,子元素:position:absolute;left:0,margin-left:-子元素宽/2 2.margin:0 auto 不确定宽度 1.flex :justify-content:center 2.子元素:position: absolute;transform: translateX(-50%);left:.原创 2020-08-06 10:56:12 · 207 阅读 · 0 评论