盒模型的属性丶display显示丶浮动

一丶盒模型的属性(重要)

　　1.padding

　　　　padding是标准文档流,父子之间调整位置

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>padding</title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 200px;
height: 200px;
background-color: red;
/*上下左右*/
padding: 10px;
/*上下  左右*/
padding: 20px 30px;
/*上  左右  下*/
padding: 20px 30px 40px;
/*顺时针   上右下左*/
padding: 20px 30px 40px 50px;
}
</style>
</head>
<body>
<div class="box">alex</div>
</body>
</html>
padding

　　2.border

　　　　三要素: 线性的宽度  线性的样式  颜色

　　　　solid 实线　　dotted小圆点　　double双实线　　bottom虚线

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>border</title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 200px;
height: 200px;
background-color: red;
/*根据方向来设置*/
border-left: 5px solid green;
border-right: 1px dotted yellow;
border-top: 5px double purple;
border-bottom: 1px dashed;
}
</style>
</head>
<body>
<div class="box">alex</div>
</body>
</html>
border

　　实例:制作三角形

　　transparent 透明

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>制作三角形</title>
<style type="text/css">
div{
width: 0;
height: 0;
border-bottom: 20px solid red;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
制作三角形

　　3.margin

　　　　前提:必须是在标准文档流下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>margin</title>
<style>
.s1{
background-color: red;
margin-right: 30px;
}
.s2{
background-color: rgb(0,128,0);
margin-left: 30px;
}
</style>
</head>
<body>
<span class="s1">alex</span><span class="s2">wusir</span>
</body>
</html>
margin

　　margin垂直方向上的坑:

　　　　margin的水平不会出现任何问题

　　　　垂直方向上 margin会出现'塌陷问题'

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>margin坑</title>
<style>
.s1{
width: 200px;
height: 200px;
background-color: red;
margin-bottom: 40px;
}
.s2{
width: 200px;
height: 200px;
background-color: green;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="s1"></div>
<div class="s2"></div>
</body>
</html>
margin(坑) 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>margin父子盒子的坑</title>
<style type="text/css">
.box{
width: 300px;
height: 300px;
background-color: red;
/*float: left;*/
}
.child{
width: 100px;
height: 100px;
background-color: green;
margin-left: 50px;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="father">
<div class="child">
</div>
</div>
</body>
</html>
margin父子盒子的坑

 

 二丶display显示

　　前提;必须是在标准文档流下

　　块级元素和行内元素的相互转换:

　　　　块级元素可以转换为行内元素:

　　　　　　display:inline

　　　　　　此时这个div不能设置宽度丶高度;

　　　　　　此时这个div可以和别人并排了

　　　　行内元素转换为块级元素:

　　　　　　display:block

　　　　　　此时这个span能够设置宽高

　　　　　　此时这个span必须霸占一行了,别人无法和他并排

　　　　　　如果不设置宽度,将撑满父亲

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
border: 1px solid yellow;
}
div a{
display: block;
width: 100px;
height: 100px;
}
span{
display: inline-block;
width: 300px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">alex</div>
<div class="box">wusir</div>
<div>
<a href="#">
<img src="http://img07.tooopen.com/images/20170818/tooopen_sy_220999936848.jpg" alt="" width="300" height="300"/>
</a>
</div>
<input type="text" /><br />
<span>哈哈哈哈</span>
<span>嘻嘻嘻嘻</span>
</body>
</html>
display

 

三丶浮动

　　float :    none  表示不浮动,默认

　　　　　  left:表示左浮动

　　　　　  right:表示右浮动

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
*{
padding: 0;
margin: 0;
}
.father{
width: 500px;
}
.box1{
width: 100px;
height: 100px;
background-color:red;
float: left;
}
.box2{
width: 100px;
height: 300px;
background-color:green;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color:blue;
float: left;
}
.father2{
width: 600px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="father">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
<div class="father2">
</div>
</body>
</html>
浮动

　　我们该如何清除浮动呢?有以下几种方法

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style>
*{
padding: 0;
margin: 0;
}
.father{
width: 500px;
height: 300px;
}
.box1{
width: 100px;
height: 100px;
background-color:red;
float: left;
}
.box2{
width: 100px;
height: 300px;
background-color:green;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color:blue;
float: left;
}
.father2{
width: 600px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="father">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
<div class="father2">
</div>
</body>
</html>
固定高度 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style>
*{
padding: 0;
margin: 0;
}
.father{
width: 500px;
}
.box1{
width: 100px;
height: 100px;
background-color:red;
float: left;
}
.box2{
width: 100px;
height: 300px;
background-color:green;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color:blue;
float: left;
}
.father2{
width: 600px;
height: 200px;
background-color: yellow;
}
.clearfix{
clear:both;
}
</style>
</head>
<body>
<div class="father">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<!-- 内墙法 -->
<div class="clearfix"></div>
</div>
<div class="father2">
</div>
</body>
</html>
clearfix内墙法

 　　　　 visibility:hidden; 设为隐藏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪元素清除法</title>
<style>
*{
padding: 0;
margin: 0;
}
.father{
width: 500px;
}
.box1{
width: 100px;
height: 100px;
background-color:red;
float: left;
}
.box2{
width: 100px;
height: 300px;
background-color:green;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color:blue;
float: left;
}
.father2{
width: 600px;
height: 200px;
background-color: yellow;
}
.clearfix:after{
content: '.';
clear: both;
display: block;
visibility: hidden;
height: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="father clearfix">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
</div>
<div class="father2"></div>
</body>
</html>
伪元素清除法 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪元素清除法</title>
<style>
*{
padding: 0;
margin: 0;
}
.father{
width: 500px;
overflow: hidden;
}
.box1{
width: 100px;
height: 100px;
background-color:red;
float: left;
}
.box2{
width: 100px;
height: 300px;
background-color:green;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color:blue;
float: left;
}
.father2{
width: 600px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">
<div class="father">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
</div>
<div class="father2"></div>
</body>
</html>
overflow清除法

 

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

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

相关文章

MapReduce：通过数据密集型文本处理

MapReduce：通过数据密集型文本处理

自上次发布以来已经有一段时间了&#xff0c;因为我一直在忙于Coursera提供的一些课程。 有一些非常有趣的产品&#xff0c;值得一看。 前一段时间&#xff0c;我购买了Jimmy Lin和Chris Dyer的MapReduce数据密集型处理程序 。 本书以伪代码格式介绍了几种关键的MapReduce算法。…
阅读更多...
ubuntu(deepin)安装apache2并支持php7.0

ubuntu(deepin)安装apache2并支持php7.0

linux虚拟机下用于开发环境测试&#xff0c;安装的apache和php7.0&#xff0c;但是简单安装完两者后apache并不能解析php&#xff0c;原因是确实apache的php扩展。 # 首先安装apache sudo apt-get install apache2 # 然后安装php7.0 sudo apt-get install php7.0 # 一般执行完这…
阅读更多...
java applet 换行_Java复习题

java applet 换行_Java复习题

一、选择题1.有Java语句如下&#xff0c;则说法正确的是()A.此语句是错误的B. a.length的值为5C. b.length的值为5D. a.length和b.length的值都为52.整数除法中&#xff0c;如果除数为0&#xff0c;则将导致的异常是( B )A. NullPointerExceptionB. ArithmeticExceptionC. Arra…
阅读更多...
解决：MVC对象转json包含\r \n

解决：MVC对象转json包含\r \n

项目中对象转json字符串时&#xff0c;如下&#xff1a;JsonSerializerSettings jsetting new JsonSerializerSettings(); jsetting.DefaultValueHandling DefaultValueHandling.Ignore; return JsonConvert.SerializeObject(resultMoldels, Formatting.Indented, jsetting);…
阅读更多...
CSS 小结笔记之滑动门技术

CSS 小结笔记之滑动门技术

所谓的滑动门技术&#xff0c;就是指盒子背景能够自动拉伸以适应不同长度的文本。即当文字增多时&#xff0c;背景看起来也会变长。 大多数应用于导航栏之中&#xff0c;如微信导航栏: 具体实现方法如下&#xff1a; 1、首先每一块文本内容是由a标签与span标签组成 <a hr…
阅读更多...
使用API​​身份验证的Spring Security

使用API​​身份验证的Spring Security

背景 尽管有许多博客文章详细介绍了如何使用Spring Security&#xff0c;但是当问题域位于标准LDAP或数据库身份验证之外时&#xff0c;我仍然经常发现配置挑战。 在本文中&#xff0c;我将介绍一些针对Spring Security的简单自定义&#xff0c;使其能够与基于REST的API调用一起…
阅读更多...
java nlpir_4-NLPIR汉语分词系统-JAVA

java nlpir_4-NLPIR汉语分词系统-JAVA

好吧&#xff0c;之前用的是旧版的&#xff0c;现在出了个新版的&#xff0c;优先选择用新版的哈。从官网下载相应的开发包&#xff0c;然后主要需要找到这几个东西添加到项目工程里面&#xff0c;1.Data文件夹 2.NLPIR_JNI.DLL 3.NLPIR.jar 4.nlpir.properties添加完那些东西后…
阅读更多...
浅析C语言中assert的用法(转）

浅析C语言中assert的用法(转）

原文地址&#xff1a;http://www.jb51.net/article/39685.htm 以下是对C语言中assert的使用方法进行了介绍&#xff0c;需要的朋友可以参考下。 assert宏的原型定义在<assert.h>中&#xff0c;其作用是如果它的条件返回错误&#xff0c;则终止程序执行&#xff0c;原型定…
阅读更多...
hihocoder offer收割编程练习赛12 D 寻找最大值

hihocoder offer收割编程练习赛12 D 寻找最大值

思路&#xff1a; 可能数据太水了&#xff0c;随便乱搞就过了。 实现&#xff1a; 1 #include <iostream>2 #include <cstdio>3 #include <algorithm>4 using namespace std;5 typedef long long ll;6 7 int a[100005], n;8 9 int main() 10 { 11 int t;…
阅读更多...
vue error:The template root requires exactly one element.

vue error:The template root requires exactly one element.

error:[vue/valid-template-root] The template root requires exactly one element. 原因&#xff1a; 因为vue的模版中只有能一个根节点&#xff0c;所以在<template>中插入第二个元素就会报错 解决方案&#xff1a; 将<template>中的元素先用一个<div>…
阅读更多...
测试驱动陷阱，第2部分

测试驱动陷阱，第2部分

单元测试中单元的故事 在本文的上半部分 &#xff0c;您可能会看到一些不好但很流行的测试示例。 但是我不是一个专业评论家&#xff08;也被称为“巨魔”或“仇恨者”&#xff09;&#xff0c;没有任何建设性的话就抱怨。 多年的TDD教给我的不仅仅是事情会变得多么糟糕。 有许…
阅读更多...
java 代码 设置环境变量_Java 配置环境变量教程

java 代码 设置环境变量_Java 配置环境变量教程

【声明】欢迎转载&#xff0c;但请保留文章原始出处→_→【正文】1、安装JDK开发环境开始安装JDK&#xff1a;修改安装目录如下&#xff1a;确定之后&#xff0c;单击“下一步”。注&#xff1a;当提示安装JRE时&#xff0c;可以选择不要安装。2、配置环境变量&#xff1a;对于…
阅读更多...
组合数据类型练习，英文词频统计实例上（2017.9.22）

组合数据类型练习，英文词频统计实例上（2017.9.22）

字典实例&#xff1a;建立学生学号成绩字典&#xff0c;做增删改查遍历操作。 sno[33号,34号,35号,36号] grade[100,90,80,120] d{33号:100,34号:90,35号:80,36号:120} print(d) print(每个学号对应分数:,d.items()) print(弹出35号的分数:,d.pop(35号)) print(获取学号:,d.key…
阅读更多...
java 代码中设置 临时 环境变量

java 代码中设置 临时 环境变量

System.setProperty("hadoop.home.dir", "D:\\software\\software_install\\dev_install\\hadoop-2.4.1"); 转载于:https://www.cnblogs.com/zychengzhiit1/p/6662376.html
阅读更多...
什么是快速开发框架

什么是快速开发框架

什么是快速开发框架 前言 做为一个程序员&#xff0c;在开发的过程中会发现&#xff0c;有框架同无框架&#xff0c;做起事来是完全不同的概念&#xff0c;关系到开发的效率、程序的健壮、性能、团队协作、后续功能维护、扩展......等方方面面的事情。很多朋友在学习搭建自己…
阅读更多...
java中的math.abs_Java.math.BigDecimal.abs()方法

java中的math.abs_Java.math.BigDecimal.abs()方法

全屏Java.math.BigDecimal.abs()方法java.math.BigDecimal.abs()返回一个BigDecimal&#xff0c;其值是此BigDecimal的绝对值&#xff0c;其标度是this.scale()。声明以下是java.math.BigDecimal.abs()方法的声明public BigDecimal abs()参数NA返回值此方法返回的名为value&…
阅读更多...
我需要多少内存

我需要多少内存

什么是保留堆&#xff1f; 我需要多少内存&#xff1f; 在构建解决方案&#xff0c;创建数据结构或选择算法时&#xff0c;您可能会问自己&#xff08;或其他人&#xff09;这个问题。 如果此图包含1,000,000条边并且我使用HashMap进行存储&#xff0c;此图是否适合我的3G堆&am…
阅读更多...
C语言程序设计预报作业

C语言程序设计预报作业

1阅读邹欣老师的博客--师生关系,针对文中的几种师生关系谈谈你的看法&#xff0c;你期望的师生关系是什么样的&#xff1f; 答&#xff1a;我认为文中的师生关系都存在一些缺陷&#xff0c;第一种师生关系是建立在病态关系上的&#xff0c;学生不是植物自然有自己的思想。所以我…
阅读更多...
浅谈23种设计模式

浅谈23种设计模式

浅谈23种设计模式 类之间的关联关系&#xff1a;在使用Java、C#和C等编程语言实现关联关系时&#xff0c;通常将一个类作为另一个类的属性。 　　(1)双向关联&#xff0c;两个类互相为各自的属性&#xff0c;比如顾客类Customer和商品类Product&#xff0c;顾客拥有商品&#x…
阅读更多...
网页布局基础

网页布局基础

1、盒子模型的第一层到第五层&#xff1a; border、padding content、background-image、background-color、margin 2、清除浮动。对受到浮动影响的标签作以下操作&#xff1a; 1、clear: both; 2、clear: right; clear: left; 3、设置宽度width: 100%(或者固定宽度) overflow…
阅读更多...
最新文章

Copyright @ 2022~2023