CSS(二) 颜色 盒模型 文字相关 border
一、颜色
rgb(r,g,b) rgb取值 0-255 分别是 色光三元色 red green blue
rgba(r,g,b,a) rgb同上 a 是 alpha 代表透明度
colot : #ffffff; 6个16进制 两两 一组 三组分别代表 rgb 如果 其中一组ff 可以 简写为 f
二、盒模型
Margin 外边距距最近有定位的父级 进行定位
值的个数 | 分别代表 |
4 | 上,右, 下,左 |
3 | 上,左右,下 |
2 | 上下,左右 |
1 | 上下左右 |
margin:auto;相对于父级 左右居中
margin 也可以拆开写 margin-top margin-right margin-bottom margin-left
padding 内边距 内部填充 如果内部看空间不足 会成大元素 也可以像margin一样才分开来表示
width
min-width 最小宽度
max-width 最大宽度
height
min-height 最小高度
max-height 最大高度
三、字体相关
font-size :12px;
color : red;
font-style: normall;
font-weight: normal/bold 或者 200 ~900 超过500 就是粗
font-variant:normal/small-caps
字体引入
@font-face{
font-family: ''king'';
src:url(king.ttf)
}
文字水平排版方式
text-align left/center/left
文本样式
text-decoration: none/underline/overline/linethrough
行高
line-height : 'height' 当行高等于 父级高度时 文本居中显示
行首缩进
text-indent:'2em'
文本阴影
text-shadow:'水平,垂直,模糊度,颜色'
处理留白
white-space:'nowrap' 不换行
文本结构
word-break:break-all 破坏单词结构
word-break:keep-all 在半角状态下 的空格进行换行
文本溢出
overflow:hidden;
text-overflow: clip 裁剪 ellipsis 省略
单行溢出打点
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis
多行溢出打点
div{
position: absolute;
width: 100px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp :;
overflow: hidden;
}
overflow
hidden : 隐藏
scroll : 滚动条
auto : 自动
设置 scroll 和 auto 都是 产生 滚动条 scroll 还会产生 下边的滚动条 我更倾向用 auto
也可以 处理某个方向的溢出
overflow-x: 横向溢出处理方式
overflow-y: 纵向溢出处理方式
四、border
border: 1px solid red;
border-width border-style border-color
border-style
solid实线 dotted点线 dashed虚线 double双线
可以 solid aotted 组合使用 或者 solid double 等 想 符合使用 要在 border-style 中定义 也可以像 margin padding 一样 写成 1-4个值
用border 画三角形
把width height 设置成 0 border的扔一边就变成三角形了 其他变得 color设置成transparent
border-radius
0 0 0 0 / 0 0 0 0 前四个是横向的半径 后四个是纵向的半径
当超最大的值 超过 100% 则把这连个值等比换算 是最大值为 100% 画圆
border-image
border-image-scure:图片路径
border-image-width:图片边框的宽度
border-image-repeat:边框的平铺方式
取值: repeat 平铺
round:铺满
stretch拉伸
border-shadow:
h-shadow:水平阴影距离
v-shadow:垂直阴影距离
blur: 可选 模糊距离
spread: 可选 阴影尺寸
color: 可选 颜色
outset: 外阴影 默认
inset: 可选值,将前阴影修改为内阴影
CSS(二) 颜色 盒模型 文字相关 border的更多相关文章
- css高级选择器&盒模型
css高级选择器&盒模型 1.组合选择器 群组选择器 /* 每个选择器为可以为三种基础选择器的任意一个,用逗号隔开,控制多个*/ div,.div,#div{ color:red } 后代(子 ...
- 李洪强和你一起学习前端之(6)css行高,盒模型,外边距
李洪强和你一起学习前端之(6)css行高,盒模型,外边距 复习昨天的知识 1.1css书写位置: 内嵌式写法 外联式写法 <link href = "1.css" rel = ...
- 87.CSS Flex 弹性盒模型布局教程(共用的css在48篇文章gird)
CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...
- css学习_css盒模型及应用
1.看透网页布局的本质 2.盒模型 margin.border.padding.width.height a. border: 1px solid red (solid/ ...
- 浅谈css中的盒模型(框模型)
css中的盒模型是css的基础,盒模型的理解可以帮助我们进行对样式进行修改.废话不多说,进入正题: 在w3c中,CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边框.边框 和 外边 ...
- 《CSS世界》笔记二:盒模型四大家族
上一篇:<CSS世界>笔记一:流/元素/尺寸下一篇:<CSS世界>笔记三:内联元素与对齐 写在前面 在读<CSS世界>第四章之前,粗浅的认为盒模型无非是margin ...
- 【从0到1学Web前端】CSS定位问题一(盒模型,浮动,BFC) 分类: HTML+CSS 2015-05-27 22:24 813人阅读 评论(1) 收藏
引子: 在谈到css定位问题的时候先来看一个小问题: 已知宽度(假如:100px)div框,水平居中,左右两百年的分别使用div框填充.且左右div自适应. 效果如下图: 这个问题的难点主要是浏览器宽 ...
- CSS中的盒模型
CSS的盒模型描述了一些长方形盒子,这些长方形盒子被用来表示文档树中的元素,并根据视觉格式化模型进行定位. 1. 盒子的尺寸 每个盒子都有一个content区域(比如文本.图片等)和可选的包围cont ...
- css 选择器;盒模型
一.引入方式:(1)CSS 层叠样式表 作用:修饰网页结构 (2)css的三种引入方式 - 行内样式 注意:行内样式的优先级是最高的 - 内接样式 - 外接样式 二.css选择器 基础选择器 * 通配 ...
随机推荐
- Django配置session
在settings.py文件里加入 #配置失效时间为半个小时 SESSION_COOKIE_AGE = 60*30 #关闭浏览器清除cookie SESSION_EXPIRE_AT_BROWSER_C ...
- 在Visual Studio 中开发Office Add-in
作者:陈希章 发表于2017年7月13日 "Talk is cheap, show me the code",我们就用代码来说话吧.这一篇将给大家介绍如何开始Office Add- ...
- 【转】JAVA处理线程超时
在实际业务中,由其是多线程并开业务中,经常会遇到某个线程执行超时.而程序如果不捕获这类情况,就会导致程序一直处于等待状态,从而影响后续线程的运行.比如说网络通迅.单任务下的复杂数据库查询等,通常处理这 ...
- ZKWeb网页框架2.0正式发布
2.0.0更新的内容有 更新框架要求 框架要求从 netstandard 1.6 升到 netstandard 2.0 框架要求从 netcoreapp1.1 升到 netcoreapp2.0 更新引 ...
- .Net版InfluxDB客户端使用时的一些坑
1.如果应用程序是WebAPi,则需要使用同步版的InfluDB客户端 2.如果应用程序是Winform或Console程序或Windows服务,则使用同步或异步版客户端都可以,建议用异步版 3.如果 ...
- 《编程人生:15位软件先驱访谈录》【PDF】下载
<编程人生:15位软件先驱访谈录>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230382231 内容简介 本书适合所有程序员,也适合 ...
- 【java】多线程同步生产者消费者问题
package 多线程; class Producer implements Runnable{ private Data data; public Producer(Data data){ this ...
- HTML5 桌面通知:Notification API
原文地址:http://blog.gdfengshuo.com/article/23/ 前言 Notification API 是 HTML5 新增的桌面通知 API,用于向用户显示通知信息.该通知是 ...
- 用C#写入Excel表并保存
想用C#操作Excel表,首先要做一些准备工作. 如果要操作 microsoft office Excel 2003表,就需要引入Microsoft office 11.0 object librar ...
- 使用Libmicrohttpd搭建内嵌(本地)服务器
Libmicrohttpd简介 GNU Libmicrohttpd是一个用来在项目中内嵌http服务器的C语言库,它具有以下几个非常鲜明的特点: C语言库,小而快. API非常简单,且都是可重入的. ...