css盒子模型和一些属性

zengni 2017-05-04

盒子模型 也叫框模型 (Box Model) 包含内容（content）内边距（padding）

边框（border）外边距（margin）

最内部的框是元素的实际内容也就是元素框紧挨着元素框外部的是内边距padding

其次是边框（border）然后最外层是外边距（margin）整个构成了框模型

所有边设置顺序的都是 上 右 下 左 有不同的单位或百分比%  

如果时正方形四条边相等设一个就可以

h1 {padding: 10px 0.25em 2ex 20%;} 
h2 {padding: 10px} 四条边相
em   1em等于当前字体的长度2em等于两个字体的长度
如一个字是3px  那么2em就是 6px

ex一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。)

 只想设置左内边距可以这样写

h3{
padding-left: 10px;
}
 
h3{
padding:0 0 0 10px;
}

这段代码是设置了全部的内边距 只不过上右下都设置成了0；

前边为0 不用写单位

外边距margin是透明的，不是不会遮挡周边的其他元素而是其他的模块会挨着外边距

如果它们都是向左浮动float ：left 会挨着外边距

css有一个绝对定位 你可以让元素到你指定的地方

绝对位置是相对于某个div的绝对位置 默认是body

position 属性规定元素的定位类型

 绝对定位与浮动float不能同时使用
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块

position:absolute生成绝对定位的元素元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定

<html>
<head>
<style type="text/css">
h1.gf
{
position:absolute;
left:150px;
top:150px
}
</style>
</head>

<body>
<h1 class="gf">离页面左侧 150px，距离页面顶部 150px</h2>

</body>

</html>

 可以利用border边框来画三角形

<!DOCTYPE html>
<html>
  <head>
    <style>
        .sanjiao {
            width : 0;
            height: 0;
            border : 100px solid transparent;
            border-top : 100px solid blue; /*这里可以设置border的top、bottom、left、right四个方向的三角*/
        }
    </style>
  </head>
  <body>
    <div class="sanjiao"></div>
  </body>
</html>
zengni

zengni

相关推荐

纯css如何绘制三角形_利用border实现画三角形的原理方法

使用css画三角形，首先想到的思路是：利用border边框样式来实现，这是由于border的边框是由四个三角形组成的。这里我们利用transparent的透明颜色来代替。上面实现的三角形都是没有带边框的，如果在需求中需要实现带边框的三角形改如何实现呢？整体

猫沙盆 / 0评论 2020-07-07

用css制作三角形图标

width: 0;height: 0;border-top: 20px solid transparent;border-left: 20px solid transparent;border-right: 20px solid transparent;b

葉無聞 / 0评论 2020-06-09

CSS实现等边三角形

聪明的你应该已经看出来了，border的边框是由四个三角形组成的，接下来我们就使用这一原理来实现等边三角形吧~将其他的三个边框给取消。你或许有个疑问？上右下左的顺序来控制四个边框，隐藏某边框就设置transparent,显示某边框就写个颜色就可以啦~比如上

buttonChan / 0评论 2020-04-10

CSS之 元素显示隐藏，用户界面样式，文本溢出隐藏，精灵技术，三角形

文本域默认右下角是可以拖拽的 ; 可以使用下列预发禁止拖拽 ;有宽度的块级元素居中对齐，是margin: 0 auto;让文字居中对齐，是 text-align: center;vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或

沈宫新 / 0评论 2020-02-23

CSS利用border绘制图性

width:10px;border-top:10px solid red;border-right:10px solid transparent;border-left:10px solid transparent;border-bottom:10px s

sdbxpjzq / 0评论 2019-12-03

每日练习:用css画图形,菱形,四种三角形,实心圆,空心圆

AlisaClass / 0评论 2019-11-04

利用CSS绘制三角形

<!DOCTYPE html>. width: 0;height: 0;/*border-top: 50px solid blue;border-right: 50px solid red;border-bottom: 50px solid g

sdbxpjzq / 0评论 2019-11-04

使用css画三角形

当代码时下面这样的时候，不知道你有没有想过出现的图形是什么呢？如果这时候中间的框消失，是不是就构成了四个三角形？？width: 0px; //注意一定要是0而不能不写，不写的话系统默认的长款可能是一整个屏幕，这是出现的就不是三角形了

sdbxpjzq / 0评论 2019-10-26

CSS画一个三角形

<!DOCTYPEhtml>. <metaname="viewport"content="width=device-width,initial-scale=1.0">. <metahtt

zengni / 0评论 2019-10-21

[摘录]纯CSS打造箭头对话框效果

首先，先定义一个边框的样式与色彩。由于边框是由内向外画，且会看到个边的接角，正好都是45度角。接着再将宽、高设成0。有没有点感觉啦!这时再把其它边的颜色改成透明。而有了这概念后，就可以开始来制作对话框了。

libowen0 / 0评论 2014-07-08

css盒子模型和一些属性

(x-height 通常是字体尺寸的一半。这段代码是设置了全部的内边距 只不过上右下都设置成了0；绝对定位与浮动float不能同时使用绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。positi

猫沙盆 / 0评论 2017-05-04

使用CSS展示各种形状的三角形

今天带来的是用纯css样式来绘制三角形。很简单的一段代码，只有一个div标签，id为div1。

AnyBisks / 0评论 2018-01-04

CSS 颜色体系详解

说到 CSS 颜色，相比大家都不会陌生，本文是我个人对 CSS 颜色体系的一个系统总结与学习，分享给大家。先列出目录直观的感受一下与 CSS 颜色相关大概覆盖了哪些内容。它表示一个具体的颜色值，且它不区分大小写。在 CSS3 之前，也就是 CSS2，一共包

zhouguizhi / 0评论 2018-02-14

实用的利用 CSS + &amp;lt;em&amp;gt;标签 来完成一个三角形的制作

利用 CSS + 标签 来完成一个三角形的制作。[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

ZiXuanFY / 0评论 2007-04-12

CSS实现8种炫酷按钮

在各种UI组件库大行其道的今天，大家已经很少自己用CSS去实现一些效果了，久而久之CSS的水平也越来越退步，所以有空还是得练练。今天给大家分享8种炫酷按钮的CSS实现。现在的主流是扁平化的设计，拟物化的设计比较少见了，所以我们仅从技术角度去分析如何实现这个

淡风wisdon大大 / 0评论 2019-08-01

单一div的正多边形变换（纯CSS）

上一篇我们介绍了如何利用before和after伪元素来做Material Design风格的按钮，里头关键的技术就在于活用边框宽度和div本体宽高，因此这篇再加码一个效果，就是纯粹利用CSS，让“单一个”div，从正三角形变换为正八边形，最后再搭配动画的

我就是停不下来 / 0评论 2019-07-01

纯CSS Material Design风格按钮

伪元素before和after的应用伪元素在里头扮演相当重要的角色，利用伪元素我们可以产生两个不在HTML里头的类div，可以大幅降低代码的复杂程度。transform的应用CSS里所有的形变都是藉由transform来完成，示例里头会用到scale与ro

jiedinghui / 0评论 2019-07-01

CSS 实现三角形，非 Hack

写过 HTML upvote arrow，speech bubble或其他类似的尖角元素的人都知道，为了创建一个纯 CSS 实现的三角形，必须使用某些 Hack。最流行的两种方式是通过 边框实现，或 Unicode 字符。不得不说，这些 CSS Hack

wangnantjobj / 0评论 2019-07-01

CSS 之三角形

<!DOCTYPE html>. border: 50px solid red;width: 0px;height: 0px;border-top-color: green;border-left-color: yellow;border-ri

yongquanx / 0评论 2019-07-01

CSS中左上朝向三角形(Top-Left Triangle)的几种制作方式

今天我们介绍几种，用css实现左上朝向三角形的写法。}大家可以尝试更多种的三角形做法，以及不同朝向的三角形。这里强烈推荐一个常用css图形的展示网站：https://css-tricks.com/the-sh...Written by：EdenShengE

lanzhusiyu / 0评论 2019-06-29

一些常用的 CSS 技巧和知识点

作为一名前端工程师，CSS 是必备技能之一，然而在日常开发中，总有那么些时候，面对着炫酷的效果图，脑子里的 CSS 属性却一片空白，于是只能借助搜索引擎，在一堆复杂的介绍中找到需要的内容复制粘贴。有没有一个地方，没有一大堆介绍，能让我直接复制粘贴呢？于是

SuiKaSan的自学室 / 0评论 2019-06-28

CSS 颜色体系详解

说到 CSS 颜色，相比大家都不会陌生，本文是我个人对 CSS 颜色体系的一个系统总结与学习，分享给大家。先列出目录直观的感受一下与 CSS 颜色相关大概覆盖了哪些内容。它表示一个具体的颜色值，且它不区分大小写。在 CSS3 之前，也就是 CSS2，一共包

zhouguizhi / 0评论 2018-02-14

CSS画三角形

最近做一个打气球小游戏，原理是原生JS操作DOM节点，最基础的页面样式涉及到css画三角形，有许多同学不太懂，所以这里系统总结下。当我们增大border的值，那么现在我们对如何绘制三角形就有一个思路：把其他三边的边框的border-color值设为tran

csstpeixun / 0评论 2018-01-12

CSS实现各种形状示例

<!DOCTYPE html>. display:inline-block;height: 120px;width: 120px;background-color: chocolate;-moz-border-radius: 60px;-web

無為 / 0评论 2017-07-06

css简单实现带箭头的边框

<div class="triangle-bottom"></div>将左右下边颜色设置为透明 transparent，得到向下的箭头。<div class="border-triangle-bo

impress / 0评论 2019-06-28

花样形状 -- CSS

}三角形左下角 Triangle Bottom Left#triangle-bottomleft {

王景迁 / 0评论 2019-06-28

纯CSS绘制的三角形箭头图案

width:0px;height:0px;border-bottom:5pxsolid#2f2f2f;width:0px;height:0px;border-top:20pxsolid#f00;width:0px;height:0px;width:0px;

懵懂听风雨 / 0评论 2016-08-22

css绘图

原理演绎：暂无浏览器渲染原理、C++造诣。

语帆 / 0评论 2016-07-13

纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）

width: 100px;height: 100px;background: red;width: 200px;height: 100px;background: red;width: 100px;height: 100px;background: red

xingyunchen / 0评论 2016-06-11

几种常用的css三角形

--向下的三角形-->

startXUEBA / 0评论 2016-05-30

使用div和CSS样式画三角形

/*设置或检索对象的边框样式。</html>备注：如果希望现实出来边框，则最少要指定两个或者两个以上边框的样式，如果只是指定一个，则无法显示出来。

dazhifu / 0评论 2015-05-19

纯css实现tooltip提示

}下箭头的描边就是两个移位的三角形叠起来的。

dangzhangjing / 0评论 2015-04-24

前端每日实战：28# 视频演示如何用纯 CSS 绘制一个世界上不存在的彭罗斯三角形

效果预览按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。可交互视频教程此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。

yaodilu / 0评论 2019-06-27

【基础】在CSS中绘制三角形及相关应用

简言本文简要阐述了用CSS边框的方法在页面上绘制三角形，包括几种典型的三角形绘制，还介绍了几个简单的应用场景。利用边框绘制三角形方法只是众多方案中的一种，大家根据项目实际，选用最适宜项目的方案。1 基本原理在CSS中，我们可以利用border-top、bo

Alisa0 / 0评论 2019-06-27

CSS基础-如何用border写三角形？

border-width: 10px;其中border-style的属性值有三种： solid（实线），dashed，dottedborder-style的属性值-效果图。其中颜色，宽度，样式属性值有四个方向。根据值的不同，对应的方向不同点击查看详情。/

nicepainkiller / 0评论 2019-06-27

纯css三角形及其应用

前言对于气泡对话框或者Popover与内容连接部分会有小三角形效果，可能在以前直接用图片去实现，其实用纯css即可实现，下面要实现的效果分别是微信对话框和面包屑，以此回顾记录一下。可以发现分别观察四边框是按类似等边梯形绘制的，如果进一步把宽高设小，甚至设为

nicepainkiller / 0评论 2019-06-26

纯CSS 绘制三角形气泡框

<div class=dr></div>结果：当我们想要绘制朝上着上方的小三角，只要把黑色区域改为白色或透明即可。border：10px solid transparent 或：border：10px solid #fff. 尖朝上

AlisaClass / 0评论 2014-04-23

纯CSS来画基本的矩形、圆形、椭圆、三角形、多边形等

但是前提是必须是单一背景色，没法做到透明。如果想让该箭头在任何场景，还需要使用png图片。图形包括基本的矩形、圆形、椭圆、三角形、多边形，也包括稍微复杂一点的爱心、钻石、阴阳八卦等。那好，下面就一起来看看我们是如何用纯CSS来画这些图形的，如果你也觉得很震

Phoebe的学习天地 / 0评论 2014-01-06

如何生成一个CSS的三角形

如何生成一个CSS的三角形直接运行代码，查看制作效果。

hfszy0 / 0评论 2013-11-01

简单说 通过CSS的滤镜 实现 火焰效果

说明上次我们了解了一些css滤镜的基础知识， 简单说 CSS滤镜 filter属性 这次我们就来用css的滤镜实现一个 火焰的效果。上次我们说过两个滤镜，blur 和 contrast。blur 是给图像设置高斯模糊， contrast 是

libowen0 / 0评论 2019-06-25

css三角形绘制方法总结

在做UI的时候，免不了和各种小图标打交道，这其中最多的应该是三角形以及箭头，一般情况下可以通过伪类使用unicode解决大部分问题。事实上，宽度相等的border是以45度对接的，如下图：。}为什么是1.41，因为正方形的对角线长度是约等于1.414。

陈浩 / 0评论 2019-06-21

用css制作一个三角形箭头

三角形我们经常用在列表、下拉提示、面包屑导航的位置，给用户以导向的引导作用，比如，在有下拉列表的地方，我们可以用向下的箭头，在列表的时候，我们能告诉用户每个列表项和下一个列表项的关系，当在面包屑导航中，能让用户了解他现在所处的栏目或者频道。我们有哪些方法来

zhouguizhi / 0评论 2012-11-22

css 实现各种基本图形

三角形写 css 的时候，用惯了背景图，忽略了 css 本身其实可以实现很多简单的基本图形，比如三角形：。百思不得qijie，为啥宽高为 0，却能显示一个三角形？平常的边框，看上去都是四条直线，其实不然，修改三角型代码，展示其两条边为例：。恍然大悟，原来边

libowen0 / 0评论 2019-06-21

纯CSS实现对白框

如果一个盒子的长宽都为零，那么它的四条border就会碰到一起，变成实心的，而且每一条border都是一个三角形；我们就可以利用三角形来实现对白框的尖下巴。通过把border上左设置为有颜色，下右设置为透明，在#demo:before放置一个向下的等边三角

wcssdu / 0评论 2019-06-21

用css的border属性实现三角

–上下左右边框交界处出呈现平滑的斜线.利用这个特点,通过设置不同的上下左右边框宽度或者颜色可以得到小三角,小梯形等.–调整宽度大小可以调节三角形形状.在上面基础上,我们把宽高度都设为0时,会呈现上述的边界斜线.，这时,其实我们已经看到有上下左右四个三角形了

魄竹 / 0评论 2012-10-19

CSS 无图片技术总结

预览动态移动边框<!锯齿边框 - background首先我们重复135度的透明背景，可以得到下面的<div class="demo-jagged-border-half"></div>. }再加一个反角度

yibawuqing / 0评论 2019-06-20

CSS实例篇--CSS3实现模拟select 以及其中的三角形

display:block;width:200px;margin:0 auto;height: 30px;line-height: 37px;font-size: 13px;border:1px #0f7fc7 solid ;box-sizing:bord

nicepainkiller / 0评论 2019-06-20

转：纯CSS圆角 箭头 三角形 多边形 — CSS border的运用

To 原创作者，由于资料是早期收藏，原始地址已丢失，请见谅！#demo1 s{position: absolute;right:20px;bottom:-30px;width: 0;height: 0;overflow: hidden;border-col

JenniferMuMu / 0评论 2012-06-24

css三角形实现写法全攻略收集

CSS三角形的一些应用。Tip中小三角的实现。纯CSS制作三角形的方法。sina微博上三角写法。告别图片—使用字符实现兼容性的圆角尖角效果beta版。DIV+CSS模拟表格对角线。如何将广告始终定位到网页右下角

xiaohuli / 0评论 2012-03-26