盒子以及盒子扩展

盒子

盒子是用来实现将网页区域化的一个非常重要的工具,盒子使得网页各部分十分清晰的被分开,对于程序员十分友好(。。。),并且使得网页更加容易维护。

盒子的常用属性

宽和高这两个属性就不说了

内边距

padding为内编剧边距

该属性是用于调整盒子内部字体距离盒子边框的距离。

写法

1.四值法

把四个方向的属性全写出来

或者一个一个的写.但是要给定方向

2.三值法

3.二值法

边框

其实也就是让我们能够亲眼看到盒子的边界在哪里

边框种类

边框属性

外边距

基本与内边距相同：margin为外边距

盒子扩展

利用边框做一个三角形

效果图

代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>大家好</title>

        <style>

            div{

                width: 0;

                height: 0;

                /*清除默认宽高*/

                border:30px white solid;

                /*以边框撑出来一个正方形*/

               border-top-color: red;

               border-bottom: 0;

            }

        </style>

    </head>

    <body>

        <div></div>

    </body>

</html>

居中(文字与盒子)

盒子居中

双值法：(像素大小)px,auto--------可以做到水平居中

文字居中

1.水平方向文字居中

2.垂直方向文字居中

清空默认样式

很多标签都有默认样式,就比如说ul,ol标签前面的点和a标签的下划线

内容溢出隐藏

当文字很多时,可以将那些超出我们盒子范围的文字隐藏起来。

overflow:hidden

初窥css---盒子以及盒子扩展的更多相关文章

  1. 初窥css---包含一些概念和一些文字样式

    初窥css CSS相关概念 全称是层叠式样式表.规定了html在网页上的显示样式.我们都知道css主要是负责装饰页面的,但是其实在HTML4之前,网页的样式与架构全部都是写在一起的,也是在HTML4之 ...

  2. CSS边距---盒子模型

    CSS盒子模型 盒子模型主要是有margin(外边距).border(边框).padding(内边距).content(内容)组成,这些属性我们可以把它转移到我们日常生活中的盒子上来理解,日常生活中所 ...

  3. css中的盒子模型

    css中的盒子模型 css中的盒子模型,有两种,一种是“标准 W3C 盒子模型”,另外一种是IE盒子模型.   1.w3c盒子模型 从图中可以看出:w3c盒子模型的范围包括了:margin,borde ...

  4. CSS基础之盒子模型及浮动布局

    盒模型 谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是 内容(content).填充(padding).边框(border).边界(margin): 这些属性我们可以把它转移到我们日常生活中的盒子( ...

  5. CSS布局(二) 盒子模型属性

    盒子模型的属性 宽高width/height 在CSS中,可以对任何块级元素设置显式高度. 如果指定高度大于显示内容所需高度,多余的高度会产生一个视觉效果,就好像有额外的内边距一样: 如果指定高度小于 ...

  6. 【CSS学习】--- 盒子模型

    一.前言:这篇只作为本人的笔记,以后慢慢再补充. 页面中的所有元素都可以被看作一个一个的“盒子”.这些盒子都包含了:内容(content).内边距(padding).边框(border)以及外边距(m ...

  7. CSS学习之盒子模型

    1. 前言 盒子模型,英文即box model.无论是div.span.还是a都是盒子. 但是,图片.表单元素一律看作是文本,它们并不是盒子.这个很好理解,比如说,一张图片里并不能放东西,它自己就是自 ...

  8. CSS快速入门-盒子模型

    一.CSS盒子模型概述 css盒子模型 又称框模型 (Box Model) ,包含了元素内容(content).内边距(padding).边框(border).外边距(margin)几个要素. con ...

  9. CSS学习系列1 - CSS中的盒子模型 box model

    css中有一个盒子模型的概念. 主要是用来告诉浏览器如何来计算页面元素的宽度和高度, 比如该元素的宽度/高度 是否包括内边距,边框,外边距.  盒子模型有一个属性box-sizing属性来说明是否包括 ...

随机推荐

  1. 异常：System.InvalidOperationException: This implementation is not part of the Windows Platform FIPS validated cryptographic algorithms FIPS信息标准限值了MD5加密

    最近做的winform项目中,有个功能使用了MD5 加密,本地测试是没有问题的,但是上线后有些用户反馈说提示如下错误 一.问题描述 中文版错误截图 英语版错误截图 具体错误信息: 有关调用实时(JIT ...

  2. CAP 2.3版本发布,支持 MongoDB

    前言 经过2个月的调整及测试,CAP 2.3 版本终于发布了,这个版本最大的特性就是对于 MongoDB 的支持,感谢博客园团队的keke同学对于 MongoDB 支持所提供的 PR,相信随着博客园的 ...

  3. 从零开始学习和改造activiti流程引擎的13天，自己记录一下

    day#1(11.13) 尝试通过spring boot 集成最新版activiti 7,但是苦于官方的文档基本为空,无法完成spring boot的配置,最终按照activiti 6的文档,手工初始 ...

  4. 前端项目中常用es6知识总结 -- 箭头函数及this指向、尾调用优化

    项目开发中一些常用的es6知识,主要是为以后分享小程序开发.node+koa项目开发以及vueSSR(vue服务端渲染)做个前置铺垫. 项目开发常用es6介绍 1.块级作用域 let const 2. ...

  5. 数据库连接(1)-从JDBC到MyBatis

    摘要 因为有持久层框架,和Spring的存在,越来越多的人对数据库连接这块不甚了解,只知使用方便,不知其原理.所以写一个数据库连接的系列文章,总结下本人在数据库连接方面遇到的问题,和对数据库连接的理解 ...

  6. kubernetes 存储卷

    kubernetes 存储卷    数据卷用于实现容器持久化数据,Kubernetes对于数据卷重新定义,提供了丰富强大的功能.在Kubernetes系统中,当Pod重建的时候,数据卷会丢失,Kube ...

  7. Python爬虫入门教程 45-100 Charles抓取兔儿故事-下载小猪佩奇故事-手机APP爬虫部分

    1. Charles抓取兔儿故事背景介绍 之前已经安装了Charles,接下来我将用两篇博客简单写一下关于Charles的使用,今天抓取一下兔儿故事里面关于小猪佩奇的故事. 爬虫编写起来核心的重点是分 ...

  8. linux下安装libcurl及开源库的一般安装步骤

    前言 总有人说:要多看源代码!那么源代码去哪找呢?找到了又该怎么安装呢?本票博客不介绍如何使用和学习,只要讲获取和安装,以后会将curl和libevent的使用和学习. 一.开源库常用安装步骤 1.开 ...

  9. Spring Boot分布式系统实践【基础模块构建3.3】注解轻松实现操作日志记录

    日志注解 前言 spring切面的编程,spring中事物处理.日志记录常常与pointcut相结合 * * Pointcut 是指那些方法需要被执行"AOP",是由"P ...

  10. .Net Core Web Api 上传女朋友的照片到微软云Azure Storage

    前言 实现一个Web Api,把女朋友照片保存到Azure云的storage里. Image Upload Api 在对应的Api Controller里,加上attribute: [Consumes ...