css样式之边框和内外边距

1、css样式之边框：border

实心的边框：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>页面一</title> 
</head>
<body>

<div style="border:1px solid blue;height:200px"></div>
</body>
</html>

虚心的边框：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>页面一</title> 
</head>
<body>

<div style="border:1px dotted blue;height:200px"></div>
</body>
</html>

2、css样式之内外边距

外边距：margin

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>页面一</title> 
</head>
<body>

<div style="height:200px;border:1px solid red;">
        <div style="height:30px;background-color:#999;margin-top:10px;margin-left:1250px;margin-right:10px;">
        guojianglin
        </div>
    </div>
</body>
</html>

内边距：padding

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>页面一</title> 
</head>
<body>

<div style="height:200px;border:1px solid red;">
         <div style="height:30px;background-color:#999;padding-top:50px;">
          guojianglin
         </div>
    </div>

</body>
</html>

时间： 2024-08-04 13:37:47

css样式之边框和内外边距的相关文章

Web前端技术：CSS部分深入---盒子模式，overflow属性,border属性,内外边距,水平居中问题，块\行内元素,浮动，层定位

1.盒子模式:页面中的所有元素都可以看成一个盒子,占据着一定的页面空间 2.overflow属性 hidden:超出部分不可见,默认值 scroll:显示滚动条 auto:如果有超出部分,显示滚动条 3.border属性 border-width:px \ thin \ medium \ thick border-style:dashed \ dotted \ solid \ double border-color:颜色 border:width  style color 案例 水平分割线: .

学习微信小程序之css11内外边距集合

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 400px; height: 600px; background-color: #b3d4fc; } .box strong{ /*对于行内元素来说,上下的内外边距不支持设置,

css盒子模型、边框border、外边距margin、填充padding、轮廓outline

盒子模型 一个盒子包括外边距.边框.内边距和实际内容 Margin(外边距):清除边框外的区域,外边距是透明的. Border(边框):围绕在内边距和外边距的边框. Padding(内边距):清除内容周围的区域,内边距是透明的. Content(内容):盒子的内容,显示文本和图像. 例如下面一个例子 <!DOCTYPE html> <html> ······ <style> div { background-color: lightgrey; width: 300px;

css 内外边距

一.边距 内边距: 边框于内容之间的距离. 外边距:边框于边框之间的距离. 二.外边距margin Margin的特性 margin始终是透明的. margin通过使用单独的属性,可以对上.右.下.左的外边距进行设置.即:margin-top.margin-right.margin-bottom.margin-left. 外边距的 margin-width 的值类型有:auto | length | percentage 也可以使用简写的外边距属性同时改变所有的外边距:margin: top r

CSS实现多重边框和内凹圆角

CSS实现多重边框 1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS实现多重边框</title> 6 <style> 7 div { 8 width: 100px; 9 height: 150px; 10 margin: 40px auto; 11 text-a

距离单位与内外边距

在android开发中常用的距离单位有px.dp.sp px就是像素,如在480*800的分辨率的显示屏上,横排有480个小格子,竖排有800个小格子,每个格子代表一个像素点.分辨率越高,像素点越高,显示的内容也就越多 屏幕尺寸相同,但分辨率可能不同,因此dpi也可能不同,细腻程度也就不同了 dp = dip(Device Independent pixels) px = dp * (dpi/160) 在dpi为160的屏幕上:1dp = 1px sp:scaled pixels,通常用于指定字

css 的包含块 、负外边距，字体，文本行高

一.包含块 目的:确定元素的位置和相对大小(%) 1.正常文档流元素和浮动元素 ---- 父元素的 content-box 2.绝对定位元素 ---- 父元素的 padding-box 3.固定定位元素 ---- 视口 二.负外边距 document.documentElement.clientWidth; 视口宽度 window.onresize 监控视口改变 三.字体 字体简写: 当 line-height 书写在 font 属性上 ,会覆盖 line-height 的值 字体大小: 默认是

清楚所有元素的内外边距及边框等

/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em

css基础 BFC 解决div块外边距合并问题

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Chrome                     os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu