第二篇、css尺寸和边框
一、尺寸和标签图
二、尺寸单位
%：百分比
in：英寸
cm：厘米
mm：毫米
pt：磅(点)（1pt等于1/72英寸）
px：像素（计算机屏幕上的一个点）
em：1em等于当前的字体尺寸，2em等于当前字体尺寸的两倍 （相对单位）
三、颜色单位
rgb(x,x,x):RGB值，如rgb（，，）
rgb(x%,x%,x%):RGB百分比值，如rgb（%，%，%）
#rrggbb:十六进制数，如#ff0000
#rgb：简写的十六进制数，如#f00
表示颜色的英文单词，如red
四、尺寸
尺寸属性适用于设置元素的宽度和高度
单位一般为像素或者百分比
宽度属性
width
max-width 只能让用户设置的里面使用
min-width 只能让用户设置的里面使用
高度属性
height
max-height
min-height
五、溢出
- 使用尺寸属性控制框的大小的时候，如果内容所需的空间大于框本身的空间会导致内容溢出
- overflow：当内容溢出元素框的时候如何处理
--visible
---hidden
---scroll
---auto
- overflow-x
- overflow-y
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*定义选择器，设置边框颜色为黑色，设置y轴没有滚动条，x轴有滚动条*/
div.sample_img{
width: 500px;
height: 150px;
border: 1px solid#;
overflow-y: hidden;
overflow-x: auto;
}
div.sample_img img{
width: 100px;
height: 100px;
}
/*设置p标签在宽度上大于所有图片的宽度*/
div.sample_img p{
width: 800px;
height: 150px;
} </style>
</head>
<body>
<div class="sample_img">
<p>
<!--图片路径-->
<img src="p_small_001.jpg">
<img src="p_small_002.jpg">
<img src="p_small_003.jpg">
<img src="p_small_004.jpg">
<img src="p_small_005.jpg">
<img src="p_small_006.jpg">
<img src="p_small_007.jpg">
</p>
</div>
</body>
</html>
如果让一个非块级元素设置宽和高需要加上display元素
span{
width:500px;
height:150px
border:1px solid #
display:block;
}
六、边框
简写方式
border:width style color;
单边定义
border-left/right/top/bottom:width style color;
border-width
border-left/right/top/bottom-width
boder-style
border-left/right/top/bottom-style
border-color
border-left/right/top/bottom-color
边框颜色，可以设置transparent（用于创建有宽度的不可见边框）
第二篇、css尺寸和边框的更多相关文章
- css 尺寸、边框、内边距、背景以及css Sprite
上节课回顾: HTML标签: 格式排版 p 段落 双br 换行 单hr 分隔线 单h1~h6 标题 双pre 原样格式化输出 双div 标签,无任何特殊意义 HTML标签 :文本 <em> ...
- 前端开发【第二篇: css】
css概述 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS ...
- 第二篇 CSS快速入门
学CSS 和 JS的路线: 1. 首先,学会怎么找到标签.只有找到标签,才能操作标签——CSS通过选择器去找标签 2. 其次,学会怎么操作标签对象. CSS概述 CSS是Cascading Style ...
- 前端第二篇---前端基础之CSS
前端第二篇---前端基础之CSS 目录 一.css介绍 二.css语法 三.css的几种引入方式 四.css选择器 五.css属性相关 六.盒子模型 拓展 一.css介绍 CSS(Cascading ...
- 2 CSS盒子模型&边框&轮廓&外边距&填充&分组嵌套&尺寸&display与visibility
盒子模型 Box Model 所有HTML元素可以看做盒子,CSS模型本质上是一个盒子,封装周围的HTML元素 包括:边距,边框,填充和实际内容 盒子模型允许我们在其他元素和周围元素边框之间的空间放 ...
- 前端总结·基础篇·CSS（二）视觉
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·CSS(四)兼容 目录 一.动画(animation)(IE ...
- 前端工程师技能之photoshop巧用系列第二篇——测量篇
× 目录 [1]测量信息 [2]实战 [3]注意事项 前面的话 前端工程师使用photoshop进行的大量工作实际上是测量.本文是photoshop巧用系列第二篇——测量篇 测量信息 在网页制作中需要 ...
- 前端总结·基础篇·CSS（一）布局
目录 这是<前端总结·基础篇·CSS>系列的第一篇,主要总结一下布局的基础知识. 一.显示(display) 1.1 盒模型(box-model) 1.2 行内元素(inline) &am ...
- 前端总结·基础篇·CSS
前端总结·基础篇·CSS 1 常用重置+重置插件(Normalize.css,IE8+) * {box-sizing:border-box;} /* IE8+ */body {margin:0;} ...
随机推荐
- 利用nginx搭建tomcat集群
1.tomcat集群 利用nginx对请求进行分流,将请求平均的分给不同的tomcat去处理,减少单个tomcat的负载量,提高tomcat的响应速度. 2.创建多个tomcat服务器(同一个服务器上 ...
- visual studio 2010 LNK1123解决方式
------------------------------------------------------------Lysen----------------------------------- ...
- php rsa加密解密实例 及签名验证-自己实践
<?php /** * Created by PhpStorm. * User: Administrator * Date: 2018/4/1 * Time: 1:50 */ //注意格式一 ...
- nl 命令
nl命令在linux系统中用来计算文件中行号.nl 可以将输出的文件内容自动的加上行号!其默认的结果与 cat -n 有点不太一样, nl 可以将行号做比较多的显示设计,包括位数与是否自动补齐 0 等 ...
- VMware Mac OS补丁安装
安装了VMware9.0在新建虚拟系统的时候,没有Appel MAC OS系统的选项,上网查了一下是需要打一个VMware Mac OS补丁就可以了.下面我来演示一下VMware Mac OS补丁怎么 ...
- 【WPF学习笔记】之WPF基础:依赖关系属性和通知
这些天来,对象似乎已经忙得晕头转向了.每个人都希望它们做这做那.Windows® Presentation Foundation (WPF) 应用程序中的典型对象会接到各种各样不同的请求:有要求绑定到 ...
- Android开发 adb命令提示：Permission denied （转）
如题:模拟器版本->android 7.1.1 遇到这样的情况把模拟器root一下就好了:su root =============2017年4月3日20:57:33============== ...
- oracle10g卸载问题
oracle10g卸载是一个比较麻烦的事,一般要完全卸载有以下几个步骤: 实现方法:1.开始->设置->控制面板->管理工具->服务停止所有Oracle服务:2.开始-> ...
- 微信小程序的官方文档
虽然不知道微信小程序今后的发展情况,不过做为一名it人员的我还是去了解它. 这是他的文档路径,里面有详细的使用和申请内测号的全部流程,这里就不再过多解释了. 看后那个开发小程序的文档记得分析你感觉微信 ...
- 解决Class 'swoole_server' not found
1.看下cli模式是否可以正常工作,命令行下运行 php -r "echo php_sapi_name();" 这条命令就是在cli模式运行php语句,php -r就是run一条p ...