初窥css---盒子以及盒子扩展
盒子以及盒子扩展
盒子
盒子是用来实现将网页区域化的一个非常重要的工具,盒子使得网页各部分十分清晰的被分开,对于程序员十分友好(。。。),并且使得网页更加容易维护。
盒子的常用属性
宽和高这两个属性就不说了
内边距
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---盒子以及盒子扩展的更多相关文章
- 初窥css---包含一些概念和一些文字样式
初窥css CSS相关概念 全称是层叠式样式表.规定了html在网页上的显示样式.我们都知道css主要是负责装饰页面的,但是其实在HTML4之前,网页的样式与架构全部都是写在一起的,也是在HTML4之 ...
- CSS边距---盒子模型
CSS盒子模型 盒子模型主要是有margin(外边距).border(边框).padding(内边距).content(内容)组成,这些属性我们可以把它转移到我们日常生活中的盒子上来理解,日常生活中所 ...
- css中的盒子模型
css中的盒子模型 css中的盒子模型,有两种,一种是“标准 W3C 盒子模型”,另外一种是IE盒子模型. 1.w3c盒子模型 从图中可以看出:w3c盒子模型的范围包括了:margin,borde ...
- CSS基础之盒子模型及浮动布局
盒模型 谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是 内容(content).填充(padding).边框(border).边界(margin): 这些属性我们可以把它转移到我们日常生活中的盒子( ...
- CSS布局(二) 盒子模型属性
盒子模型的属性 宽高width/height 在CSS中,可以对任何块级元素设置显式高度. 如果指定高度大于显示内容所需高度,多余的高度会产生一个视觉效果,就好像有额外的内边距一样: 如果指定高度小于 ...
- 【CSS学习】--- 盒子模型
一.前言:这篇只作为本人的笔记,以后慢慢再补充. 页面中的所有元素都可以被看作一个一个的“盒子”.这些盒子都包含了:内容(content).内边距(padding).边框(border)以及外边距(m ...
- CSS学习之盒子模型
1. 前言 盒子模型,英文即box model.无论是div.span.还是a都是盒子. 但是,图片.表单元素一律看作是文本,它们并不是盒子.这个很好理解,比如说,一张图片里并不能放东西,它自己就是自 ...
- CSS快速入门-盒子模型
一.CSS盒子模型概述 css盒子模型 又称框模型 (Box Model) ,包含了元素内容(content).内边距(padding).边框(border).外边距(margin)几个要素. con ...
- CSS学习系列1 - CSS中的盒子模型 box model
css中有一个盒子模型的概念. 主要是用来告诉浏览器如何来计算页面元素的宽度和高度, 比如该元素的宽度/高度 是否包括内边距,边框,外边距. 盒子模型有一个属性box-sizing属性来说明是否包括 ...
随机推荐
- SQLServer之分离数据库
分离数据库注意事项 要求具有 db_owner 固定数据库角色中的成员资格. 可以分离数据库的数据和事务日志文件,然后将它们重新附加到同一或其他 SQL Server实例. 如果要将数据库更改到同一计 ...
- SUSE12SP3-Mycat(1)安装
目录 前言 环境 安装说明 安装 1.mycat 2.mycat-eye 前言 介绍自己看. mycat官网:http://www.mycat.io/ 环境 系统: SUSE12SP3 软件 版本 说 ...
- 服务端渲染和nuxt简单介绍
概述 最近研究了一下服务端渲染,有一些心得,记录下来供以后开发时参考,相信对其他人也有用. 参考资料: Vue SSR指南 nuxt.js官网 服务端渲染介绍 服务端渲染简单来说,就是分别对项目用we ...
- Python--开发简单爬虫
简单爬虫架构 动态运行流程 URL管理器的作用 URL管理器的3种实现方式 网页下载器的作用 Python网页下载器的种类 urllib2下载网页的3种方法 网页解析器的作用 Python的几种网页解 ...
- Kubernetes的DaemonSet（上篇）
背景 静儿作为美团容器化团队HULK的一员,经常需要和Kubernetes(k8s)打交道.第一次登陆node(宿主机)的时候,发现连续登陆几台都看到了Prometheus-Node-Exporter ...
- JPA中EntityListeners注解的使用
使用场景 EntityListeners在jpa中使用,如果你是mybatis是不可以用的 它的意义 对实体属性变化的跟踪,它提供了保存前,保存后,更新前,更新后,删除前,删除后等状态,就像是拦截器一 ...
- 深度链接（DeepLinking）怎样免费实现
深度链接技术(DeepLinking),一般是通过Web页面调用原生App,并把需要的参数通过Uri的形式传递给App,主要使用方式有:两个App之间的广告.App的社交分享.页面跳转App.DSP广 ...
- Angular开发技巧
由于之前有幸去参加了ngChina2018开发者大会,听了will保哥分享了Angular开发技巧,自己接触Angular也有差不多快一年的时间了,所以打算对Angular开发中的一些技巧做一个整理 ...
- 103 - kube-scheduler源码分析 - 调度算法-寻找predicates和priorities
scheduler的主要逻辑是predicate和priority,前者回答哪些节点可以运行pod的问题,后者回答哪个节点更合适运行pod的问题.今天我们的任务是:从主函数出发,寻找predicate ...
- Netflix网关zuul(1.x和2.x)全解析
zuul 是netflix开源的一个API Gateway 服务器, 本质上是一个web servlet应用. Zuul可以通过加载动态过滤机制,从而实现以下各项功能: 验证与安全保障: 识别面向各类 ...