html盒子模型页面居中,【静态页面架构】CSS之盒子模型

CSS架构

盒子模型;

以内容区(显示文本和图像)

内边距(内容区至边距的距离)

边距(内容区的边界)

外边距(元素的边框之间的距离)

1.边距;

border属性;

简写属性用来设置边距的上(top)右(right)下(bottom)左(left)。宽度,颜色和样式

div{

width: 200px;

height: 200px;

background-color: blue;

border-right: 5px double darkgray;

border-bottom: 10px dashed red;

border-left: 15px dotted lime;

}

盒子的阴影;

以box-shadow属性设置盒子阴影效果

offset-x表示阴影的水平方向偏移量;

负值为左偏移正值为右偏移

offset-y表示阴影的垂直方向偏移量;

负值为左偏移正值为右偏移

div{

width:200px;

height: 200px;

background-color: blue;

box-shadow: 3px 3px 3px black;

/*设置盒子阴影*/

}

边框圆角;

以border-radius定义来设置边距的圆角;直角,圆角还是椭圆角

div {

width: 100px;

height: 100px;

}

#qq {

background-color: red;

border-radius: 25px;

}

#ww {

background-color: blue;

border-radius: 50px;

}

#ee {

background-color: lime;

border-radius: 50px 25px;

}

img {

border-radius: 50px;

}

26.jpg

边框图像;

以border-image定义来设置在元素的边框上的图像

div {

width: 100px;

height: 100px;

/*background-color: lightcoral;*/

border: 30px solid transparent;

/*

边框的图像 - 类似于背景图像的设置

* border-image-source - 设置边框图像的路径

* border-image-width - 设置边框图像的宽度

* border-image-repeat - 设置边框图像的平铺方式

*/

border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 30;

}

爱新觉罗

2.内边距;

paddying属性;

也属于简写属性用来设置盒子的内边距上,右,下,左

#qq{

width: 200px;

height: 200px;

background-color: blue;

padding-top: 50px;

padding-right: 100px;

padding-bottom: 150px;

padding-left: 200px;

}

#hh{

width: 200px;

height: 200px;

background-color: red;

}

3.外边距;

上外边距和左外边距;

以margin-left设置元素的水平方向的位置

值为正数,当前元素向右移动

值为负数,当前元素向左移动

margin-top设置元素垂直方向的位置

值为正数,当前元素向下移动

值为负数,当前元素向上移动

上外边距和右外边距

以margin-bottom设置下一个元素的位置

值为正数,下一个兄弟元素向下移动

值为负数,下一个兄弟元素向上移动

margin-right设置下一个元素的位置

值为正数,下一个兄弟元素向右移动

值为负数,下一个兄弟元素向左移动

div {

display: inline-block;

}

#d1 {

width: 200px;

height: 200px;

background-color: lightcoral;

/*

margin-bottom 下外边距控制块级元素的下一个兄弟元素的位置

* 如果值为正数的话,下一个兄弟元素向下移动

* 如果值为负数的话,下一个兄弟元素向上移动

*/

/*margin-bottom: -100px;*/

/*

margin-right 右外边距控制内联元素或行内块级元素的下一个兄弟元素的位置

* 如果值为正数的话,下一个兄弟元素向右移动

* 如果值为负数的话,下一个兄弟元素向左移动

*/

/*margin-right: -5px;*/

}

#d2 {

width: 200px;

height: 200px;

background-color: yellowgreen;

margin-left: -5px;

}

外边距重叠;

以设置两个相邻的元素的外边距,第一个设置下外边距第二个设置上外边距

#qq{

width: 200px;

height: 200px;

background-color: blue;

margin-bottom: 100px;

/*id为ww的div元素向下移动100px*/

}

#ww{

width: 200px;

height: 200px;

background-color: red;

margin-top: 200px;

/*id为ww的div元素向下移动200px*/

}

外边距传递;

以设置两个元素师父子元素,当子元素设置上外边距,该上边距会在父级元素内出现

#qq{

width: 200px;

height: 100px;

background-color: blue;

/*设置背景颜色*/

padding-top: 100px;

/*为子级元素设置上边距*/

}

#ww{

width:100px;

height: 100px;

background-color: red;

/*设置背景颜色*/

}

内容水平居中;

以margin: 0 auto;父级div设置在元素的水平居中

p {

/*该属性只对文本内容水平对齐*/

text-align: center;

/*文本水平方向居中*/

}

div{

width: 100px;

height: 100px;

background-color: blue;

margin: 0 auto;

}

星际战甲

4.盒子模型;

块级元素盒子模型;

可设置宽高,设置高度为其中内容的高度

div{

width: 200px;

height: 200px;

background-color: blue;

border: 1px solid black;

/*设置边框的样式*/

padding: 50px;

/*设置内边距*/

margin: 50px;

/*设置外边距*/

}

内块级元素盒子模型;

是不可设置宽和高,元素的大小事其中内容撑起

span{

width: 200px;

height: 200px;

background-color: red;

border: 1px solid black;

padding: 30px;

/*水平方向内边距是有效;设置文本内容的水平方向位置*/

/*垂直方向内边距是有效;文本内容位置没有变,而内边距会向上或向下扩展*/

margin: 30px;

/*垂直方向上或下的外边距是无效的

而水平方向的外边距是有效的*/

}

星际战甲

行内块级元素盒子模型;

不自动换行,可设置宽高;

div{

width: 100px;

height: 100px;

border: 1px solid black;

padding: 30px;

/*设置内边距*/

margin: 30px;

/*设置外边距*/

}

#qq{

background-color: red;

}

#hh{

background-color: blue;

}

box-sizing属性;

以box-sizing属性设置盒子模型;

content-box;为默认值为标准盒子模型

设置为内容区;内边距;边框;外边框

border-box;为怪异盒子模型

设置盒子的大小;外边距

#qq {

width: 200px;

height: 200px;

/*

默认值,标准盒子模型

* 实际的宽度 = width + padding-left + padding-right + border-left + border-right

* 实际的高度 = height + padding-top + padding-bottom + border-top + border-bottom

*/

box-sizing: content-box;

border: 10px solid black;

padding: 50px;

/*设置内边距*/

margin: 50px;

/*设置外边距*/

background-color: lightcoral;

}

#hh {

width: 200px;

height: 200px;

/*

怪异盒子模型

* 实际宽度 = width

* 实际高度 = height

*/

box-sizing: border-box;

border: 10px solid black;

padding: 50px;

/*设置内边距*/

margin: 50px;

/*设置外边距*/

background-color: green;

}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/531850.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

最强动画制作人书包_声优访谈丨恋与制作人动画中配声优访谈——夏磊

亲爱的制作人们:距离恋与制作人动画上线还有6天!今天的中配声优访谈嘉宾是在动画中为许墨献声的夏磊老师~固定布局 工具条上设置固定宽高背景可以设置被包含可以完美对齐背景图和文字以及制作自…

(单例设计模式中)懒汉式与饿汉式在多线程中的不同

/*目的:分析一下单例设计模式中,懒汉式与饿汉式在多线程中的不同!开发时我们一般选择饿汉式,因为它简单明了,多线程中不会出现安全问题!而饿汉式需要我们自己处理程序中存在的安全隐患,但是饿汉…

shiro修改html不生效,shiro中anon配置不生效

再配置shiro的时候,如下代码要注意:1、下述代码中必须是LinkedHashMap 而不能是HashMap。2、anon定义必须在authc之前否则anon定义不生效Beanpublic ShiroFilterFactoryBean shiroFilterFactoryBean(SecurityManager securityManager){ShiroFilterFactor…

codesys com库_CoDeSys官方系统库在线下载,替换国内下载服务器教程

欢迎加入工控分享技术服务社区推荐阅读Codesys学习资料大全Codesys控制器关于CANopen总线的详细应用说明当你软件报以下错误,你可以直接下载,如果下载不成功,可以换个网络试一试,或者进行下面的操作。由于国内网络问题&#xff0c…

centos7恢复mysql数据库_MySQL数据库升级迁移填坑记

原库:*.*.101.73/74 系统环境: Suse 12.4MySQL: 5.7.29新库:*.*.110.46/47系统环境:CentOS7.7 64位MySQL版本: 5.7.30[一、数据库升级迁移场景]因业务侧在*.*.101.73/74 mysql数据库服务器上部署了java应用程序、HadoopHbase数据库等大数据…

so把asp页面生成静态的html,23、asp系列课程--server.URLEncode方法和server.HTMLEncode方法...

作者:杨凡来自:杨凡博客地址:blog.sina.com.cn/aboutshisanserver.URLEncode方法和server.HTMLEncode方法可以对字符串进行编码。我们一个一个的说。server.URLEncode可以对字符串进行URL编码转换,语法格式为:server.u…

poj 1905Expanding Rods

1 /*2 二分 几何3 弧长L&#xff0c; 圆半径R&#xff0c; 弧度 q&#xff0c; LR*q;4 二分&#xff1a; 弧度&#xff08;0~PI&#xff09; 或者 高度&#xff08;L/2~L&#xff09; 5 */6 #include<cstdio> 7 #include<iostream>8 #include<cmath>9…

java中同步嵌套引起的死锁事例代码

/*目的&#xff1a;自己写一个由于同步嵌套引起的死锁&#xff01;思路&#xff1a;多个线程在执行时&#xff0c;某一时刻&#xff0c;0-Thread绑定了LockA锁&#xff0c;1-Thread绑定了LockB锁&#xff01;当0-Thread要去绑定LockB锁时 和 1-Thread要去绑定LockA锁时都不能绑…

下列关于html5表单的多样输入方式,IT兄弟连 HTML5教程 HTML5表单 多样的输入类型1...

原标题&#xff1a;IT兄弟连 HTML5教程 HTML5表单 多样的输入类型1HTML5拥有多个新的表单输入类型&#xff0c;这些新特性提供了更好的输入控制和验证。并不是所有的主浏览器都支持新的input类型&#xff0c;不过我们可以在所有的主浏览器中使用它们&#xff0c;即使不被支持&a…

v7000更换电池步骤_ups电源运行中是否可以更换电池?应如何操作呢

ups电源在日常使用中除了日常维护工作之外&#xff0c;对于使用达到一定年限的时候&#xff0c;内部使用的ups蓄电池就需要更换了&#xff0c;很多人以为ups不间段电源在工作的时候是可以跟换电池。其实&#xff0c;这个具体就需要看ups电源设计的原理&#xff0c;不同厂家设计…

poj 2031Building a Space Station(几何判断+Kruskal最小生成树)

1 /*2 最小生成树 几何判断3 Kruskal 球心之间的距离 - 两个球的半径 < 0 则说明是覆盖的&#xff01;此时的距离按照0计算 4 */5 #include<iostream>6 #include<cstdio>7 #include<cstring>8 #include<cmath>9 #include<algorithm>…

华为怎么用手机看时间到读秒_华为手机灭屏也可以看时间?其实设置方法很简单,不会有些可惜了...

华为作为手机界名副其实的大佬&#xff0c;而且华为手机的口碑也是非常不错的。那么为什么会有这么多人喜欢华为手机呢&#xff1f;主要是华为手机的质量高&#xff0c;并且用很多实用的小功能&#xff0c;比如说神奇的灭屏显示功能等等&#xff0c;今天就给大家分享几个华为手…

将数据转化成字符串时:用字符串的链接 还是 StringBuilder

/*目的&#xff1a;将数据转化成字符串时&#xff1a;用字符串的链接 还是 StringBuilder呢&#xff1f; */ public class Test{public static void main(String[] args){int[] arr{1,2,4,5};System.out.println(arrayToString(arr));}/* public static String arrayToString(…

html频谱跳动效果,HTML5音频可视化频谱跳动代码

HTML5音频可视化频谱跳动代码*{margin:0;padding:0;}#canvas {display: block;background: linear-gradient(135deg, rgb(142, 13, 133) 0%, rgb(230, 132, 110) 100%);}window.οnclickfunction () {if(oAudio.paused) {oAudio.play();}else{oAudio.pause();}}//创建音频上下文…

hive转16进制unhex_Java 进制的转换

什么是进制&#xff1f;进制也就是进位计数制&#xff0c;是人为定义的带进位的计数方法(有不带进位的计数方法&#xff0c;比如原始的结绳计数法&#xff0c;唱票时常用的“正”字计数法&#xff0c;以及类似的tally mark计数)。 对于任何一种进制---X进制&#xff0c;就表示每…

html中css二级联动,html二级联动学习笔记

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">http://www.cnblogs.com/whgw/archive/2012/05/11/2496667.htmlJquery的select操作集合jQuery获取Select选择的Text和Value: 语法解释&#xff1a; 1. $("#select_id").change(function()…

poj 2187 Beauty Contest(凸包求解多节点的之间的最大距离)

1 /* poj 2187 Beauty Contest2 凸包&#xff1a;寻找每两点之间距离的最大值3 这个最大值一定是在凸包的边缘上的&#xff01; 4 5 求凸包的算法&#xff1a; Andrew算法&#xff01; 6 */7 #include<iostream> 8 #include<cstdio>9 #include&l…

引入ui组件_Vuejs, Semantic CSS前端框架fish-ui

简介基于vue2.0, github star 690, 一款小众的UI框架fish-ui&#xff0c;直接上截图&#xff1a;主要特性配备Vue.js&#xff0c;Moment&#xff0c;Vue-Router&#xff0c;ES6和Babel 6使用Webpack 2.0和Vue LoaderSemantic CSS 组件使用 Less支持现代浏览器快速开发安装npm i…

html5可以用flash,HTML5网页可以直接看视频,不用flash吗,另外WP7为何不支持flash。。。HTML5网页...

Android中可以直接使用webView来加载HTML5通过video标签来播放视频。以下为基本步骤&#xff1a;一、需要在AndroidManifest.xml文件中声明需要使用HardwareAccelerate, 可以细化到Activity级别&#xff0c;如果不需要的View可以声明不要用加速&#xff0c;但是需要在代码中做具…

pojBuy Tickets2828线段树或者树状数组(队列中倒序插队)

这题开始的思路就是模拟&#xff1a;就像数组中插点一样&#xff0c;每一个想买票的人都想往前插队&#xff01; 但是这样的话肯定TLE&#xff0c; 看了别人的思路之后才恍然大悟&#xff01; 正解&#xff1a;将开始的正序插入&#xff0c;变成倒序插入&#xff0c;这样的话&a…