前端学习——css盒子模型简单布局

<html><head><title>盒子模型简单布局</title><meta charset="UTF-8"/></head><style type="text/css">div{width: 300px;height: 300px;}/*设置上下两个大的盒子*/#header,#bottom{width: 650px;margin-top: 20px;margin: auto;}/*两个大盒子里分别套两个左右相邻的小盒子*/#div01{border: solid 1px blue;float: left;margin-right: 20px;       }#div02{ border: solid 1px yellow;float: left;}#div03{border: solid 1px red;float: left;margin-right: 20px;}#div04{border: solid 1px blueviolet;float: left;}</style><body><div id="header"><div id="div01">我是01</div><div id="div02">我是02</div></div><br /><div id="bottom"><div id="div03">我是03</div><div id="div04">我是04</div></div></html>

效果展示：

注意：CSS中很多时候会用到浮动来布局，也就是经常见到的float:left或者float:right，简单点来说，前者是左浮动(往左侧向前边的非浮动元素飘，全是飘得元素的话，就按照流式来浮动从左到右，放不下则换行)，后者是右浮（往右飘）动。

盒子模型中用的最多的一般是margin和padding标签

前端学习——css盒子模型简单布局相关推荐

前端笔记 | CSS盒子模型
CSS盒子模型一.盒子模型 1.1 网页布局的本质 1.2 盒子模型的组成 1.3 边框border 1.4 内边距padding 1.5 外边距margin 1.6 清除内外边距二.特殊样式 2 ...
CSS盒子模型/页面布局
1.盒子模型页面布局要学习三大核心,盒子模型,浮动和定位.学好盒子模型对我们布局页面帮助很大! 1.1看透网页布局的本质网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子利用CSS设置 ...
程序媛老张前端Day3———CSS盒子模型
Day4--css盒子模型网页中的布局可以看成事一个一个盒子组成,排在网页中. 属性: 宽度:width:px.%.auto(%是该元素相对于父级盒子宽度的%) 高度:height:px.%.aut ...
从零开始学前端：CSS盒子模型属性 --- 今天你学习了吗？（CSS：Day14）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:伪元素和盒子模型 - 今天你学习了吗?(Day13) 文章目录从零开始学前端:程序猿小白也可以完全掌握! ...
【web前端】CSS盒子模型
居然隔了一个星期了,啊我到底在干嘛. 使用课程是黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili 目录框架一.盒子模型 ...
前端学习 -- Css -- 盒子模式
框模型: CSS处理网页时,它认为每个元素都包含在一个不可见的盒子里. 为什么要想象成盒子呢?因为如果把所有的元素都想象成盒子,那么我们对网页的布局就相当于是摆放盒子. 我们只需要将相应的盒子摆放到网 ...
前端学习 day4 : 盒子模型,浮动,定位
1.居中问题 text-align是让块元素中的内容在块元素的范围内水平居中如果设置块元素中的内容的属性line-height的高度等于块元素高度的话,那么该内容垂直居中 2.盒子边框的设置 2.1 ...
11.前端笔记-CSS盒子模型-外边距margin
1.margin 1.1 margin的语法盒子与盒子之间的距离 <!DOCTYPE html> <html lang="en"> <head> ...
CSS盒子模型与页面布局
202209 week1 day5~day6 前端学习 1 盒子模型 1.1 盒子模型结构 1.1.1 内容 1.1.2 边界(margin) 1.1.3填充(padding) 1.1.4 边框(bo ...

前端学习——css盒子模型简单布局

前端学习——css盒子模型简单布局相关推荐

最新文章

热门文章