css中的盒子模型

最新推荐文章于 2019-10-15 11:09:29 发布
最新推荐文章于 2019-10-15 11:09:29 发布
阅读量228 收藏
点赞数
分类专栏： CSS-基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/june_ruikang/article/details/51006480
版权
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*消除浏览器自带的偏移*/
*{
margin: 0;
padding: 0;
}
/*margin-left: auto;
margin-right: auto;保证居中*/
.wrapper{
width: 960px;
margin-left: auto;
margin-right: auto;
color: black;
background: #000000;
font-size: 30px;
text-align: center;
overflow-x: hidden;
}
/*-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
这三句话保证布局不会被打破*/
.header{
height: 100px;
background: blue;
margin-bottom: 10px;
padding: 10px;
border: 10px solid red;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.sidebar{
float: left;
width: 220px;
margin-right: 20px;
margin-bottom: 10px;
height: 300px;
background: blueviolet;
padding: 10px;
border: 10px solid red;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.content{
float: left;
width: 720px;
height: 300px;
background: aqua;
margin-bottom: 10px;
padding: 10px;
border: 10px solid red;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.footer{
background: aliceblue;
height: 100px;
clear: both;
padding: 10px;
border: 10px solid red;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">页眉</div>
<div class="sidebar">侧边栏</div>
<div class="content">主内容</div>
<div class="footer">页脚</div>
</div>
</body>
</html>
june_ruikang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS盒子模型
weixin_45709134的博客
12-22 186
目录CSS盒子模型1.简介2.设置边框和内容(Border,Content)3.内边距（padding）4.外边距(margin)4.1垂直外边距的重叠5.内联元素(inline)的盒子6.盒子的显示(display)7.盒子溢出(overflow)8.文档流（Normal Flow）8.1文档流定义8.2元素在文档流中的特点:8.3脱离文档流9.浮动(float)9.1浮动定义9.2浮动特点 CSS盒子模型 1.简介 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和
css中盒子模型的属性
当路danglu0010
05-19 1864
css中盒子模型的属性
css中盒子模型
zsl15039718107的博客
10-15 963
css中盒子模型 css盒模型 简介：就是用来装页面上的元素的矩形区域。CSS中的盒子模型包括IE盒子模型和标准的W3C盒子模型。 box-sizing(有3个值哦)：content-box | border-box | inherit 标准盒子模型： box-sizing: content-box; IE盒子模型： box-sizing: border-box; 从上图可以看出标准盒子模型与I...
css盒子模型图解
09-25
### CSS盒子模型详解 #### 一、引言 CSS（层叠样式表）是Web设计中不可或缺的一部分，它用于控制HTML文档的布局和外观。在CSS中，元素的布局通过盒子模型来定义，该模型决定了元素如何占用空间以及与其他元素交互...
深入理解CSS中的盒子模型
09-27
CSS中的盒子模型（Box Model）是网页布局...总的来说，深入理解CSS盒子模型能帮助开发者更好地控制网页元素的外观和交互，从而实现更精细的页面布局。了解和熟练运用盒子模型，可以提升CSS编码的效率和网页设计的质量。
CSS3盒子模型详解
12-13
本章将介绍CSS3中各种盒的知识点；主要包含以下内容： CSS3中各种各样盒的类型概念、浏览器支持情况； 当盒中内容超出容纳范围时，如何利用属性来让浏览器按照自己想要的方式对盒中内容进行显示； 掌握给盒添加阴影...
CSS 理解盒子模型
09-25
CSS盒模型是网页布局的基础，它是CSS样式中用于描述元素占据空间的方式。理解盒模型对于任何想要精通网页设计的人来说都是至关重要的。盒模型定义了元素的总尺寸，包括内容(content)、内边距(padding)、边框(border)...
css盒子模型详解加示例
09-25
在实际开发中，理解并熟练运用CSS盒子模型对于创建响应式、布局合理的网页至关重要。通过调整内填充、边框和外边距，可以精确控制元素的尺寸和间距，实现灵活多样的网页设计效果。通过实践和参考他人经验，可以更好...
css中的多样化文本阴影：text-shadow
june_ruikang的博客
03-28 1423
/*text-shadow：添加多样化的文本阴影*/ /*text-shadow：length||length||opacity||color：左右偏移距离||上下偏移距离||模糊度||阴影颜色*/ p[lang="a"]{ font-family: "微软雅黑"; font-weight: 100px; font-size: 100px; color: #DC143C; text-
css中的溢出文本和文本对齐
june_ruikang的博客
03-28 1134
/*溢出文本处理：text-overflow*/ /*text-overflow：clip|ellipsis|ellipsis-word：直接裁切|用。。。代替最后一个字符|用。。。代替左后一个词*/ li{ line-height: 30px; font-size: 20px; border-bottom: 1px solid #ccc; width: 600px;   /*设置宽度
css中颜色的设置
june_ruikang的博客
03-28 719
/*HSL色彩模式：hsl(length,percentage,percentage)：色调、饱和度、明亮度*/ /*HSL的优势：可以在同一色系中选择颜色，使得搭配不会太离谱*/ .hs1{ height: 20px; border: 1px solid #f00; padding: :10px; height: 170px;; background-color: hsl(0,0%
css中的边框border
june_ruikang的博客
03-29 559
/**/ /**/ .bor1{ margin-left: auto; margin-right: auto; width: 80%; height: 200px; border: 3px brown solid; } /*border-top-colors……同于border-top-style一系列，可以分别设计四个面*/ .bor2{ width: 300px; he
css中字体的设置
june_ruikang的博客
03-28 412
/*font-family:文本字体名称 font-style:文本样式 font-variant:文本是否为小型大写字母大小写 font-weight：设置文本的粗细 font-stretch:文本是否横向的拉伸变形 font-size:文本字号大小写 src:自定义字体的相对路径或绝对路径，此属性只能在@font-face中使用*/ p[lang="a"]{ font-fami
变形
june_ruikang的博客
05-02 394
1、基本属性 transform:none| * 例如：旋转180度，放大1.5倍，倾斜120度，移动10，矩阵变换 transform:rotate(180deg) scale(1.5) skew(120deg) matrix(1,0,0,1,50,50); 以上四个函数任选。 2、transform-origin属性 transform-origin属性值可以是百分比、em、p
边框
june_ruikang的博客
05-02 323
1、基本属性： border：border-width  border-style border-color border-width（默认3px，单位px） border-style（必写，none：无边框，solid:实线，dotted：点状边框,dashed:虚线边框，    double：双线，groove：3d凹槽……） border-color（默认黑色） 2、基本属性细化：
背景
june_ruikang的博客
05-02 310
1、简单背景： （1）      图片：background: url(img/back.jpg) 20px 20px; （2）      颜色：background: #ffff； 2、基本背景: background-color:bisque; background-image: url(img/back.jpg);          /*repeat-x、repeat-y、rep
文本
june_ruikang的博客
05-02 300
1、简单字体： 不在css中设置时也可显示，如下均能显示： （1）      font: 13px; （2）      font: "微软雅黑"; 用font设置字体，浏览器的兼容性不太好 2、基本字体： font-family: "微软雅黑";//字体 一般pc端使用宋体，wap使用微软雅黑 禁止用中文属性值 font-size: 15px;//大小 font-style:i
css 弹性盒子模型
最新发布
05-29
CSS弹性盒子模型（Flexbox）是一种用于布局设计的CSS3模块。使用弹性盒子模型可以轻松实现复杂的布局结构，而不需要使用传统的浮动和定位方法。 弹性盒子模型中，通过在容器上设置display:flex或display:inline-flex属性来将一个元素定义为弹性容器，容器内的子元素则成为弹性项。弹性容器内部的元素会根据设置的flex属性值，自动调整宽度和高度，从而实现灵活的布局效果。 弹性盒子模型中一些重要的概念和属性包括： 1. 弹性容器：将一个元素定义为弹性容器，通过设置display:flex或display:inline-flex属性来实现。 2. 弹性项：在弹性容器内部的子元素被称为弹性项，每个弹性项可以拥有自己的flex属性值，从而影响它在容器中的布局位置。 3. flex-direction属性：指定了弹性容器内弹性项的排列方向，默认值为row，即水平方向。 4. justify-content属性：指定了弹性容器内弹性项在主轴方向上的对齐方式，包括flex-start、flex-end、center、space-between和space-around等值。 5. align-items属性：指定了弹性容器内弹性项在侧轴方向上的对齐方式，包括flex-start、flex-end、center、baseline和stretch等值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值