HTML&CSS基础-外边框
HTML&CSS基础-外边框
作者：尹正杰
版权声明：原创作品，谢绝转载！否则将追究法律责任。
一.HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>外边距</title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: red;
/**
* 定义内边距
*/
border: 10px solid yellow;
/**
* 定义外边距
* 外边距指的是当前盒子与其它盒子之间的距离,他不会影响可见狂的大小，而是会影响到盒子的位置。
* 盒子有四个方向的外边距:
* margin-top:
* 设置box1上的外边距，盒子上边框和其它盒子的距离
* margin-bottom:
* 设置box1下外边距。
* margin-left:
* 设置box1左外边距。
* margin-right:
* 设置box1右外边距。
*
* 由于页面中的元素都是靠左靠上摆放的，所以要注意以下两点:
* 当我们设置上和左外边距时，会导致盒子自身的位置发生改变;
* 当我们设置下和右边距时，会改变其它盒子的位置
*
* 外边距也可以指定一个负值，如果外边距设置的时负值，则元素会向反方向移动
*
* margin还可以设置auto，auto一般只设置给水平方向的margin
* 如果只指定左外边距或者右外边距的margin为auto则会将外边距设置为最大值;
* 垂直方向外边距如果设置auto，则外边距默认就是0;
* 如果将left和right同时设置为auto，则会将两侧的外边距设置为相同的值,就可以使元素自动在父元素中居中;
* 所以我们经常讲左右外边距设置为auto以使子元素在父元素水平居中
*
* 外边距同样可以使用简写属性margin,规则和padding一样：
* 可以同时设置四个方向的外边距，分别表示，上，右，下，左这四个外边距的值(顺时针方向);
* 可以同时设置三个值，分别表示上，左右，下这四个外边距的值
* 可以同时设置两个值，分别表示上下，左右这四个外边距的值
* 也可以设置一个值，表示上下左右的外边距都一样
*
*/
margin-top: 50px;
margin-bottom: 50px;
margin-left: 50px;
margin-right: 50px;
} .box2{
width: 200px;
height: 200px;
background-color: deeppink;
margin-left: auto;
margin-bottom: -100px;
} .box3{
width: 200px;
height:200px;
background-color: blue;
margin-left: auto;
margin-right: auto;
} .box4{
width: 200px;
height: 100px;
background-color: #FFFF00;
margin: 10px 20px 30px 40px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
二.浏览器打开以上代码渲染结果
HTML&CSS基础-外边框的更多相关文章
- HTML&CSS基础-内边框
HTML&CSS基础-内边框 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML源代码 <!DOCTYPE html> <html> &l ...
- HTML 学习笔记 CSS样式（外边框 外边框合并）
CSS外边距 围绕在元素边框的空白区域就是外边距 设置外边距会在元素外创建额外的空白 设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位.百分数值甚至负值. CSS ma ...
- （谷歌浏览器等）解决css中点击input输入框时出现外边框方法【outline:medium;】
问题:在使用谷歌浏览器,360浏览器时,点击input输入框会出现带颜色的外边框,如下图所示:
- Bootstrap3基础 table-bordered/hover 表格加外边框和鼠标悬停对应行的背景色加深
内容 参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
- css总结4：input 去掉外边框,placeholder的字体颜色、字号
1 input 标签去除外边框: 在进行webAPP开发时,input外边框非常影响美观,去除外边框方法如下: <input style="border: 0px;outline:no ...
- CSS入门（css简介与样式汇总、CSS的使用方式和特征、CSS基础选择器和复杂选择器、边框阴影）
一.CSS的作用 1.以统一的方式实现样式的定义 2.提高页面样式的可重用性和可维护性 3.实现了内容(HTML)和表示(CSS)的分离 HTML和CSS之间有什么关系? HTML:构建网页的结构 C ...
- HTML&CSS基础-边框简写属性
HTML&CSS基础-边框简写属性 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML源代码 <!DOCTYPE html> <html> ...
- JD . 简单的网站构成、引入图标、去除 图片间距／加粗／倾斜／下划线／蓝色外边框 禁止文本拖拽、文字居中、做logo、模拟鼠标 、不使用hover外部css样式实现hover鼠标悬停改变样式
模拟京东案例准备: 截图(效果图PSD文件) 搭建项目环境 (结构样式行为分离) HTML 核心文件 index.html CSS 控制样式 base.css(基础样式 ...
- css中的margin（外边框）、border（边框）、padding（填充）的区别
Margin(外边距) - 清除边框外的区域,外边距是透明的. Border(边框) - 围绕在内边距和内容外的边框. Padding(内边距) - 清除内容周围的区域,内边距是透明的. Conten ...
随机推荐
- 嵌入式LINUX基础教程 第2版
嵌入式LINUX基础教程 第2版 目录 第1章 入门 11．1 为什么选择Linux 11．2 嵌入式Linux现状 21．3 开源和GPL 21．4 标准及相关组织 31．4．1 Linux标准基 ...
- 【翻译】Flink Table Api & SQL —Streaming 概念 ——动态表
本文翻译自官网:Flink Table Api & SQL 动态表 https://ci.apache.org/projects/flink/flink-docs-release-1.9/de ...
- html中使用mathjax数学公式
测试用例: test.html: <!DOCTYPE html> <html> <head> <link rel="stylesheet" ...
- 多个进程间通信之Queue
多个进程间通信之Queue 实现数据传递 #!coding:utf-8 from multiprocessing import Process, Queue import os,time,random ...
- LeetCode 1047. 删除字符串中的所有相邻重复项(Remove All Adjacent Duplicates In String)
1047. 删除字符串中的所有相邻重复项 1047. Remove All Adjacent Duplicates In String 题目描述 LeetCode1047. Remove All Ad ...
- 对于并发任务，应该使用 Task 替代 BackgroundWorker
背景 EF + Oracle,并发存储监控记录,使用 BackgroundWorker 时产生错误如下: public void MonitorLogging(DateTime DateStart, ...
- c++ map容器使用及问题
C++ STL库map容器一些总结,欢迎大家指正补充. map容器由两部分组成,分别为关键字(Key)和值(Value),关键字和值都可以声明为任意类型的数据,注意:关键字唯一,不能重复!使用需包含头 ...
- PAT(B) 1085 PAT单位排行（Java：20分）
题目链接:1085 PAT单位排行 (25 point(s)) 题目描述 每次 PAT 考试结束后,考试中心都会发布一个考生单位排行榜.本题就请你实现这个功能. 输入格式 输入第一行给出一个正整数 N ...
- memcached源码分析二-lru
在前一篇文章中介绍了memcached中的内存管理策略slab,那么需要缓存的数据是如何使用slab的呢? 1. 缓存对象item内存分布 在memcached,每一个缓存的对象都使用一个ite ...
- change事件传值方式 data-set 以及复杂数据类型 可以动态创建对象push到数组里面
<template> <div> <!-- <div class="banner"> <a-breadcru ...