一、尺寸和标签图

二、尺寸单位

%：百分比

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尺寸和边框的更多相关文章

  1. css 尺寸、边框、内边距、背景以及css Sprite

    上节课回顾: HTML标签: 格式排版 p 段落 双br 换行 单hr 分隔线 单h1~h6 标题 双pre 原样格式化输出 双div 标签,无任何特殊意义 HTML标签 :文本 <em> ...

  2. 前端开发【第二篇: css】

    css概述 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS ...

  3. 第二篇 CSS快速入门

    学CSS 和 JS的路线: 1. 首先,学会怎么找到标签.只有找到标签,才能操作标签——CSS通过选择器去找标签 2. 其次,学会怎么操作标签对象. CSS概述 CSS是Cascading Style ...

  4. 前端第二篇---前端基础之CSS

    前端第二篇---前端基础之CSS 目录 一.css介绍 二.css语法 三.css的几种引入方式 四.css选择器 五.css属性相关 六.盒子模型 拓展 一.css介绍 CSS(Cascading  ...

  5. 2 CSS盒子模型&边框&轮廓&外边距&填充&分组嵌套&尺寸&display与visibility

    盒子模型 Box  Model 所有HTML元素可以看做盒子,CSS模型本质上是一个盒子,封装周围的HTML元素 包括:边距,边框,填充和实际内容 盒子模型允许我们在其他元素和周围元素边框之间的空间放 ...

  6. 前端总结·基础篇·CSS（二）视觉

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·CSS(四)兼容 目录 一.动画(animation)(IE ...

  7. 前端工程师技能之photoshop巧用系列第二篇——测量篇

    × 目录 [1]测量信息 [2]实战 [3]注意事项 前面的话 前端工程师使用photoshop进行的大量工作实际上是测量.本文是photoshop巧用系列第二篇——测量篇 测量信息 在网页制作中需要 ...

  8. 前端总结·基础篇·CSS（一）布局

    目录 这是<前端总结·基础篇·CSS>系列的第一篇,主要总结一下布局的基础知识. 一.显示(display) 1.1 盒模型(box-model) 1.2 行内元素(inline) &am ...

  9. 前端总结·基础篇·CSS

    前端总结·基础篇·CSS 1 常用重置+重置插件(Normalize.css,IE8+) * {box-sizing:border-box;}  /* IE8+ */body {margin:0;}  ...

随机推荐

  1. full join 时通过辅助列序号列消除笛卡尔积重复列

    如果没有序号列,那么如果领灯表里有3条数据,还灯表里面有2条数据,full join后就是3*2=6条数据 --1.领灯表,每天每班每人允许重复数据 select ID ,ROW_NUMBER() o ...

  2. js中删除数组元素的几种方法

    1:js中的splice方法 splice(index,len,[item])    注释:该方法会改变原始数组. splice有3个参数,它也可以用来替换/删除/添加数组内某一个或者几个值 inde ...

  3. source sh运行脚本的差别

    主要有两种方式运行shell脚本 1)source test.bsh 2)sh test.bsh 1)souce运行脚本文件会在父程序中运行.各项动作都会在原本的bash内生效.运行过程不另开进程.脚 ...

  4. maven＋eclipse＋mac＋tomcat 多模块发布

    之前项目中有用到过maven,但是没运行过web的maven,所以这里记录一下. 项目的结构: ---master  //parent ---web-project // ---client-proj ...

  5. JavaScript跨浏览器事件处理

    var EventUtil = { getEvent: function(event){ return event ? event : window.event; }, getTarget: func ...

  6. 程序猿学英语—In August the English learning summary

    时间真快,总结的7月份英语学习总结刚刚结束,转眼间又该对8月份的英语学习进行小节了. 进入8月初.下发了一个文档,用一个星期的时间学音标.纠音. 在王美的带领下我组也发起了纠音运动. 刚开 始纠音的时 ...

  7. 使用java命令运行class文件带包名时出错

    会出现classnotfound的错误. 如:文件x:/Test.java; package xx public class Test{} javac 编译后,java命令出错,需要手动构建包目录xx ...

  8. python基础： day4作业计算器

    作业:计算器开发 实现加减乘除及拓号优先级解析 用户输入 1 - 2 * ( (60-30 +(-40/5) * (9-2*5/3 + 7 /3*99/4*2998 +10 * 568/14 )) - ...

  9. Python闲谈（二）聊聊最小二乘法以及leastsq函数

    1 最小二乘法概述 自从开始做毕设以来,发现自己无时无刻不在接触最小二乘法.从求解线性透视图中的消失点,m元n次函数的拟合,包括后来学到的神经网络,其思想归根结底全都是最小二乘法. 1-1 “多线→一 ...

  10. mysql中的乐观锁和悲观锁

    mysql中的乐观锁和悲观锁的简介以及如何简单运用. 关于mysql中的乐观锁和悲观锁面试的时候被问到的概率还是比较大的. mysql的悲观锁: 其实理解起来非常简单,当数据被外界修改持保守态度,包括 ...