css
关注
分享
扫一扫
文章平均质量分 91
喝牛奶的鱼1022
好记性不如烂笔头，计算机菜鸟研究生一枚
展开
-
页面布局之左侧固宽，右侧自适应
css布局之左侧固定宽度，右侧自适应1、固定宽度区浮动，自适应区设置margin 给左边的固定宽度区left浮动并设置一个宽度，右边的自适应区right只设置margin值，假设right的宽度是100%，那么设置margin后，它得宽度就变为100%-margin；left发现自己的宽度可以和right挤在同一行，它就浮动上来了。<!DOCTYPE html>...原创 2018-04-16 12:50:39 · 941 阅读 · 0 评论 -
CSS之清除浮动
浮动会使元素逃离文档流，按照指定方向 发生移动，遇到父级边界或相邻的浮动元素停下来。 高度塌陷问题：在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。 由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。 下面是解决浮动...原创 2018-04-16 16:59:29 · 414 阅读 · 0 评论 -
CSS盒模型
谈谈你对CSS盒模型的认识每个元素，都会形成一个矩形块，主要包括四部分：margin(外边距)+border(边框)+padding(内边距)+content(内容)基本概念：标准模型+IE模型标准盒模型的width只包含内容的宽度：width=content； IE盒子模型的width包含内容的宽度和border以及padding：width=border+padding+co...原创 2018-08-30 20:52:20 · 164 阅读 · 0 评论 -
关于BFC
参考链接: 10 分钟理解 BFC 原理 https://zhuanlan.zhihu.com/p/25321647 10分钟复习CSS盒模型与BFC https://www.imooc.com/article/43233 CSS学习笔记——深入理解BFC https://www.imooc.com/article/9723什么是BFC BFC即Block Formatting Con...原创 2018-08-24 11:06:45 · 207 阅读 · 0 评论 -
页面布局之圣杯布局和双飞翼布局
关于marin负值提到这两种布局，离不开margin负值，我们首先了解一下margin负值； 1、当元素不存在width属性或width:auto时，负margin会增加元素宽度<!DOCTYPE html><html lang="en"><head> <meta charset="原创 2018-08-29 13:11:05 · 333 阅读 · 0 评论 -
页面布局之实现三栏布局
问题：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各位300px，中间自适应。 参考链接 https://www.cnblogs.com/chengzp/p/layout.html1、浮动解决方案使用浮动实现此三栏布局 其中html结构如下：浮动的左右两栏要写在自适应栏前面<article class="left-right-center">原创 2018-08-29 20:32:25 · 887 阅读 · 0 评论 -
页面布局之上下固定中间自适应
常用的页面布局除了两边固定中间自适应和一端固定另一端自适应之外，还有上下固定中间自适应的布局，今天在这里做一下总结。 实现这种布局我主要通过两种方法：使用绝对定位对这三栏都实现绝对定位，其中中间绝对定位的位置是上下两栏的高度，内容超出则中间部分出现流动条； 代码实现：<!DOCTYPE html><html lang="en"><head>...原创 2018-08-30 09:57:31 · 7449 阅读 · 0 评论