Day5:html和css

如何实现盒子居中问题，要让盒子实现水平居中，要满足是快级元素，而且盒子的宽度要定义。然后数值为auto即可。

.dashu {

 width: 100px;

 margin: 0 auto;

}

盒子的水平居中为

margin: auto;

而文字的水平居中为:

text-align: center;


text-align: center; // 文字水平居中

margin: auto; // 盒子的水平居中

盒子水平居中:

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Demo</title>

	<style>

	div {

		text-align: center; /*居中对齐*/

		width: 100px;

		height: 100px;

		background-color: blue;

		 /* margin: 0 auto; 自动  水平居中对齐 */

		 /* margin: auto; 上下左右都是auto*/

	}

	</style>

</head>

<body>

	<div>

		达叔小生

	</div>

</body>

</html>


margin: 0 auto; // 通俗

// margin: auto; 上下不显示

清除内外边距

* {

 padding: 0;

 margin: 0;

}

外边距合并:

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Demo</title>

	<style>

	div {

		width: 200px;

		height: 200px;

		background-color: blue;

	}

	.da{

		margin-bottom: 100px;

	}

	.shu{

		background-color: red;

		margin-top: 150px;

	}

	</style>

</head>

<body>

	<div class="da">1</div>

	<div class="shu">2</div>

</body>

</html>

外边距合并以合并的最大值为准.

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Demo</title>

	<style>

	.father {

		width: 500px;

		height: 500px;

                border: 1px solid red;

		background-color: red;

	}

	.son {

		width: 200px;

		height: 200px;

		background-color: blue;

		margin-top: 50px;

		margin-left: 50px;

	}

	</style>

</head>

<body>

	<div class="father">

		<div class="son"></div>

	</div>

</body>

</html>

content宽度和高度

padding不会影响盒子的大小.

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Demo</title>

	<style>

	.father {

		height: 200px;

		background-color: pink;

		width: 300px;

		/* padding-left: 30px; 给定了宽度,所以padding会撑开*/

	}

	.son {

		padding-left: 30px;

		/*没有宽度不会撑开*/

	}

	</style>

</head>

<body>

	<div class="father">

		<div class="son">dashu</div>

	</div>

</body>

</html>

padding内边距

圆角

border-radius: 50%;


<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Demo</title>

	<style>

	div {

		width: 300px;

		height: 300px;

		background-color: red;

		margin: 100px auto;

		border-radius: 50%;

	}

	</style>

</head>

<body>

	<div></div>

</body>

</html>


<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Demo</title>

	<style>

	body {

		background-color: #ccc;

	}

	.radius a {

	   width: 170px;

	   height: 170px;

	   background-color: #fff;

	   display: inline-block;

	   margin: 30px;

	   border-radius: 50%;

	   text-align: center;

	   line-height: 170px;

	   color: red;

	   text-decoration: none;

	   font-weight: 700;

	}

	.radius a:hover {

		background-color: red;

		color: #fff;

	}

	</style>

</head>

<body>

	<div class="radius">

		<a href="#">文字内容</a>

		<a href="#">文字内容</a>

		<a href="#">文字内容</a>

	</div>

</body>

</html>

盒子阴影

box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影
属性 说明
h-shadow 水平阴影的位置
v-shadow 垂直阴影的位置
blur 模糊距离
spread 阴影的尺寸
color 阴影的颜色
inset 将外部阴影改为内部阴影 
<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Demo</title>

	<style>

	div {

		width: 200px;

		height: 200px;

	}

	div:hover {

		box-shadow: 0 15px 15px rgba(0,0,0,0.1);

	}

	</style>

</head>

<body>

	<div></div>

</body>

</html>

浮动

float浮动:标准流,浮动,定位.

float可以让多个div在同一行显示.

属性值 说明
left 元素向左浮动
right 元素向右浮动
none 元素不浮动 
选择器 {float: 属性值;}


<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Demo</title>

	<style>

	.up {

		width: 200px;

		height: 100px;

		background-color: red;

		float: left;

	}

	.down {

		width: 220px;

		height: 120px;

		background-color: purple;

	}

	</style>

</head>

<body>

	<div class="up"></div>

	<div class="down"></div>

</body>

</html>


<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Demo</title>

	<style>

	.father {

		width: 600px;

		height: 600px;

		background-color: blue;

	}

	.son {

		width: 200px;

		height: 200px;

		background-color: red;

		float: right;

	}

	</style>

</head>

<body>

	<div class="father">

		<div class="son"></div>

	</div>

</body>

</html>


<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Demo</title>

	<style>

	div {

		width: 100px;

		height: 100px;

	}

	.one {

		background-color: red;

		float: left;

	}

	.two {

		background-color: purple;

	}

	.three {

		background-color: blue;

		float: left;

	}

	</style>

</head>

<body>

	<div class="one"></div>

	<div class="two"></div>

	<div class="three"></div>

</body>

</html>

盒子模型布局稳定性

width >  padding  >   margin

浮动(float)

普通流（标准流）、浮动和定位
属性值 描述
left 元素向左浮动
right 元素向右浮动
none 元素不浮动（默认值）

推荐

Day1:html和css

Day2:html和css

Day3:html和css

Day4:html和css

如果看了觉得不错

点赞！转发！

达叔小生：往后余生，唯独有你

You and me, we are family !

90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通

简书博客： 达叔小生

https://www.jianshu.com/u/c785ece603d1

结语

  • 下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注
  • 小礼物走一走 or 点赞

Day5:html和css的更多相关文章

  1. 【百度前端技术学院 Day5/6】CSS盒模型及Float简单布局

    1. 盒模型 1.1 内容区 content 默认情况下,width和height只包括内容区域的宽和高,不包括border.padding.margin使用box-sizing可以使其包含conte ...

  2. Day6:html和css

    Day6:html和css 复习 margin: 0; padding: 0; <!DOCTYPE html> <html lang="en"> <h ...

  3. 百度前端技术学院-基础-day5.6

    今天学习了关于盒模型.浮动等页面布局的方法. 受到同学的启发,顺便学习了flex的布局. 还了解了一些编码的基本规则. 对我接下来的学习帮助很大. 交作业: HTML : https://github ...

  4. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  5. Day5 CSS基本样式和C3选择器

    Day5 CSS基本样式和C3选择器 一.背景属性 1.背景颜色            background-color:transparent(默认值,透明); 颜色的取值:            ...

  6. Python实例---模拟微信网页登录(day5)

    第六步: 实现发送/接受消息---day5代码 settings.py """ Django settings for weixin project. Generated ...

  7. CSS的未来

    仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...

  8. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  9. 前端css兼容性与易混淆的点

    一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...

随机推荐

  1. 进军的socket

    在学socket有时候我们会遇到这种问题: 解决方法一: 在服务端中加入:severTCP.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1) ...

  2. nuget安装本地nupkg文件

    打开visual studio,菜单选择‘工具’->‘选项’ 然后 接下来,选择‘程序包源’,把‘包括预发行版’打钩,然后安装需要的包到工程即可,如下图:

  3. Python批量执行oracle中的insert语句

    从oracle导出一个表的数据,导出的格式是insert语句,数据量30万. 直接在PL/SQL Developer中执行,速度非常慢,脚本中也是100条数据提交一次.因为需要的时间太长,每次中断后, ...

  4. Python之路(第三十八篇) 并发编程：进程同步锁/互斥锁、信号量、事件、队列、生产者消费者模型

    一.进程锁(同步锁/互斥锁) 进程之间数据不共享,但是共享同一套文件系统,所以访问同一个文件,或同一个打印终端,是没有问题的, 而共享带来的是竞争,竞争带来的结果就是错乱,如何控制,就是加锁处理. 例 ...

  5. linux 图形化界面 && 谷歌浏览器 安装

    一.图形化界面安装 yum groupinstall "Desktop" 如果运行显示 则 yum groupinstall "X Window System" ...

  6. 认识JavaScript Promise

    参考: EC前端 - Promise - http://www.ecmaer.com/javascript/nativeObj/promise.html 关于Promise: 什么是 Promise? ...

  7. OO第二单元多线程电梯总结

    OO第二单元多线程电梯总结 第一次作业 设计思路 Input为输入线程,负责不断读取请求并将读到的请求放入调度器中. Dispatcher为调度器,是Input线程和Elevator线程的共享对象,采 ...

  8. 第一个VS2015 Xaramin Android项目(终)

    其实还有一个问题没解决,也拖很久了.中途公司的项目太紧导致无法学习更新. 之前的问题是这样的:项目搭建成功了,App也成功发布到虚拟机.便尝试增加控件 Xaml 设计界面如下: 但是在虚拟机运行却这样 ...

  9. 关于Eclipse的一些简单设置

    1.加入eclipse没有编辑的文件 例如:想用html类型打开*.jetx文件,在window-preferences-General-Content Types-Text-Html加入*.jetx ...

  10. dubbo入门学习 二 RPC框架

    rpc框架解释 谁能用通俗的语言解释一下什么是 RPC 框架? - 远程过程调用协议RPC(Remote Procedure Call Protocol) 首先了解什么叫RPC,为什么要RPC,RPC ...