一、尺寸和标签图

二、尺寸单位

%:百分比
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. [译] ContentEditable 那些好的、坏的和坑

    译者注 我的上一篇译文 “[译] 通过 contentEditable 属性创建一个所见即所得的编辑器” 的原文 “Create a WYSIWYG Editor With the contentEd ...

  2. background API

    语法: background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial| ...

  3. TI_DSP_SRIO - package type(包格式)

    1.The type of SRIO packageis determined by the combination of Ftype(format type) and Ttype(transacti ...

  4. MyBatis_传入参数的问题

    一.单个参数 1.基本数据类型 (1)直接使用 List<ChargeRuleDO> tests(long id); <select id="tests" res ...

  5. iOS tableView嵌套部分WebView效果实现

    对于一些资讯类的app,比如网易新闻,今日头条这样的,他们的文章详情页大部分基本都是tableView中嵌套webView来实现的效果,其中顶部标题,关注按钮等这些可能是原生的,内容部分是webVie ...

  6. 使用第三方工具Cornerstone搭建本地SVNserver

    一.加入版本号资源库 点击Cornerstone左下角REPOSITORIES栏右边的加号button.在弹出的视图中选择File Repository,然后选择Create a New Reposi ...

  7. NHibernate 延迟加载与立即加载 (第七篇)

    NHibernate 延迟加载与立即加载 (第七篇) 一.延迟加载 延迟加载可以理解为:当需要用的时候才加载. 假设我们数据库有一个Person对象,一个Country对象,其中Person属于Cou ...

  8. member access within misaligned address 0x000000000031 for type 'struct ListNode', which requires 8 byte alignment

    在做LeetCode的two sum题目的时候,提交代码遇到了如题的runtime error,后来在一篇博客上看到了解决方法. 现有如下结构体: struct ListNode { int val; ...

  9. Vue.js 2 入门与提高(一)

    ** Vue.js -- 渐进式前端框架 ** Vue.js作为一个后起的前端框架,借鉴了Angular .React等现代前端框架/库的诸多特点,并且 取得了相当不错的成绩. Vue.js的定位是一 ...

  10. linux 中vim学习与总结

    平常使用vim总是忘记快捷键,在这里做一个总结一下比较常用的快捷把,省的每次都要去查. h : 向左移动一个字符(←) j : 向上移动一个字符(↑) k : (↓) l : (→) ctrl+f : ...