css.day03
css的分类（位置）：
css层叠样式表
1.内嵌 样式表
2.行内样式表
3. 外连
css选择器分类
基础选择器
标签
id选择器
类选择器
复合选择器
交集选择器（标签指定式） span.one
后代选择器 .one .two
并集选择器 （集体声明） .one,.two
通配符选择器 * 所有标签
body, h1{font-size:12px;}
<body>
<div></div>
<span></span>
<h1></h1>
</body>
伪类选择器
a:link
a:visited
a:hover
a:active
lv h a
背景：
背景颜色
背景图片 background-image:url(xxx.jpg);
背景平铺 -repeat: no-repeat
背景位置： -position:
background-position: top left center 方位名词
background-position:3px 10px; 精确像素
background-position:10px center; 这个背景图片 离横坐标是10像素的距离
fixed
边框：
border-color
border-width
border-style 样式 solid 实线
一个属性里面有多个值 ： 复合属性
border:1px solid #f00;
border-top
1.盒子模型（box）
盒子模型是我们css+div 的入门门槛 .
盒子模型的重要参数：
border 盒子边框
内部距离 内边距 内补白 padding
外边距 margin
方位 top left right bottom
2.margin 复合属性 （参数个数的写法）
这种写法同样适合于 padding
这样要求：
盒子距离上边距是 100px 下 是 200px 左边是0px 右边是20px
margin-top:100px;
margin-bottom:200px;
margin-left:0;
margin-right:20px;
简写： margin:100px 20px 200px 0;
margin:100px; （一个参数）
表示 上下左右都是100像素。
margin: 100px 30px; （两个参数）
表示 上下是100 左右是30
margin: 100px 30px 10px; （三个参数）
表示 上是100 左右是30 下是10
margin: 10px 20px 30px 40px;(四个参数)
表示 上是10 右是20 下是30 左是40 （顺时针）
3.关于padding的问题(盒子的实际大小)
padding会影响盒子大小.
盒子实际大小： 盒子本身大小+border+padding
例如： 一个盒子宽度 100 边框 是 10 内边距是20 问这个盒子实际大小是：
盒子=100+10*2+20*2 160 像素
152
100 +40 +12
100 = padding +border
88 + 5 + 1 =100
最终的大小240 = 盒子本身宽 +border + padding
240= 220 + 2+ 12+6
特别注意：
不是所有的padding都会影响盒子的大小。
如果这个盒子没有高和宽就不会影响盒子大小。
4.几个小点
4.1firebug 的使用 ctrl+shfit+c 测试元素 f12 调出
4.2稳定性：
盒子本身的宽和高是最稳定的 （高度剩余法）
其次是padding 值
最后margin值。
所以，我们本着的原则是：能用padding的地方就不要用margin。
其实，padding 也可以看做是盒子本身的宽度和高度。
4.3清除浏览器内外边距
这个是我们写网站css 的第一句话。（必须写）
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:; padding:; }
4.4让盒子居中对齐
margin:0 auto;
注意： 让盒子内部的文字或者图片居中对齐： text-align:center;
但是让盒子居中对齐： margin：0 auto;
margin:auto 也行，最常用的还是margin：0 auto;
注意：这个盒子应该是块级元素。而且必须有宽。
4.5代码的书写顺序
1. 先集体声明清除浏览器样式
2. 声明body 字体大小 颜色 字体
3. 声明a 链接样式。
resize:none 不让火狐拖动文本域
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>评论页面</title>
<style type="text/css">
body,div,ul,li,h1,h3,h4,h2,textarea,input,p{margin:0; padding:0;}
body{font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#3c3c3c;}
a{color:#000; text-decoration:none;}
a:hover{color:#F00; text-decoration:underline;}
.box{ width:725px; height:220px; border:1px solid #abc; margin:0 auto; margin-top:100px; padding-left:25px; padding-top:30px;}
.box h3 a{font-weight:normal; color:#F00; text-decoration:underline; margin-left:10px;}
textarea{ width:670px; height:80px; border:1px solid #abc; margin:15px 0; padding:10px; font-size:12px; color:#CCC; resize:none;}
p{margin-top:15px; color:red;}
</style>
</head>
<body>
<div class="box">
<h3>评论 <img src="data:images/110.jpg" /><a href="#">俺要打分</a></h3>
<textarea>请输入您对的意见或者建议！！</textarea>
<input type="image" src="data:images/tj.jpg" />
<p>暂时没有评论</p>
</div>
</body>
</html>
5.<label></label> 标签
for id 来使用
<style type="text/css">
*{margin:0; padding:0;}
.box{width:300px; margin:100px auto;}
.search{width:175px; height:20px; border:1px solid #ccc; color:#CCC; background:url(search_03.png) no-repeat 5px center; padding-left:25px;}
label{color:#3c3c3c; font-size:14px;}
</style>
</head>
<body>
<div class="box">
<label for="sear">搜索一下：</label><input type="text" value="请输入搜索内容..." class="search" id="sear" /></div>
</body>
</html>
1. Background:red; 除了颜色之外没有其他样式
Background-color:red; 只针对于颜色
-image repeat
Background-position : x y ;
a:link a:visited a:hover a:active
边框 上下左右 top right left bottom
内边距 padding
外边距 margin
盒子大小：
1. 盒子实体大小： 盒子本身宽和高+padding+border
2. 盒子的最终大小： 盒子本身的宽和高+padding+border+margin
Margin：10px 20px 30px 40px
*{margin:0; padding:0;}
设计网页代码写法:
(1) 清除浏览器样式 *{margin:0; padding:0;}
(2) 页面的整体声明： body { font-size:12px; c} ul ol
(3) 链接 a{color:blue;} a:hover{color:red;}
1.如果让斜体(em i) 变成正常字体： font-style:normal;
如果让加粗的字体 变成正常字体 ： font-weight:normal;
em{font-style:normal;}
盒子模型 边框
Textarea Resize 设置是否可以拖动 火狐默认是可以拖动的 resize:none; 不允许拖动
firefox 火狐浏览器
Firebug 火狐浏览器插件
Fireworks 图像处理软件（ps）
Fw dw ps flash 网页四剑客
Ps 装饰装潢 平面 网页
Fw 创造出来就是为了网页
外边距塌陷的规则
刚开始 人们觉得margin 塌陷是个bug 后来才发现，所有的浏览器都这样。
所以就不算bug
2. 外边距 只会在垂直之间产生塌陷；水平之间不受影响；
3.垂直之间塌陷的原则是以两方最大的外边距为准；50 100
4.只有两个盒子的垂直外边距完全接触才会触发。
一般情况下，垂直两个盒子出现这种情况下，比较少（并列）
出现情况比较多的是，嵌套关系的盒子。急需要我们去解决。
解决方法：
1. 给大盒子指定一个边框。可以解决 ，如果不希望看到边框，可以改成白色。
2. 溢出 overflow:hidden 大盒子加
overflow 溢出
visible| auto| hidden| scroll
Auto 内容如果超出，则显示滚动条 否则 不显示滚动条
Scroll 不管超不超出，则都显示滚动条。
hidden 超出的部分，不显示。
white-space
white-space： nowrap 强制一行内显示直到文本结束或者碰到<br/>
cursor 鼠标
.ani .cur
cursor:url(mao.ani); 设置鼠标样式
Cursor:pointer; 所有的浏览器都能识别
word-break:break-all;
适合长英文句自动换行。
浮动
3.1.标准流
标准流实际上就是一个网页内标签元素正常排列的顺序的意思；比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现列外的情况叫做标准流布局；
3.2. 浮动
Float ：left right
浮动是我们学习的第一种脱离标准流的方式；也就是说它不受文档流的限制，按照另外的一种方式去布局；
记住！学习浮动，浮动有一个主要的作用是可以让多个盒子水平排列，并且他是一种严格的对齐方式！
浮动找浮动， 不浮动找不浮动
一列固定宽度且居中
两列固定宽度且居中
转载请备注。
css.day03的更多相关文章
- 2020年12月-第02阶段-前端基础-CSS Day03
CSS Day03 盒子模型(CSS重点) css学习三大重点: css 盒子模型 . 浮动 . 定位 主题思路: 理解: 1.能说出盒子模型有那四部分组成 2.能说出内边距的作用以及对盒子的影响 3 ...
- css.day03.eg
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- 2021年3月-第02阶段-前端基础-HTML+CSS阶段-Day03
HTML5 第三天 一. 认识 3D 转换 3D 的特点 近大远小 物体和面遮挡不可见 三维坐标系 x 轴:水平向右 -- 注意:x 轴右边是正值,左边是负值 y 轴:垂直向下 -- 注意:y 轴下面 ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- Day03 javascript详解
day03 js 详解 JavaScript的基础 JavaScript的变量 JavaScript的数据类型 JavaScript的语句 JavaScript的数组 JavaScript的函数 Ja ...
- day03 Django目录结构与reques对象方法
day03 Django目录结构与reques对象方法 今日内容概要 django主要目录结构 创建app注意事项(重点) djago小白必会三板斧 静态文件配置(登录功能) requeste对象方法 ...
- java-前端之css
css样式: <!-- 内联样式:在元素的style属性内写样式 --> <h2 style="color: red;">愿你单枪匹马,亦能所向披靡!< ...
- CSS的未来
仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...
随机推荐
- bzoj2127: happiness
Description 高一一班的座位表是个n*m的矩阵,经过一个学期的相处,每个同学和前后左右相邻的同学互相成为了好朋友.这学期要分文理科了,每个同学对于选择文科与理科有着自己的喜悦值,而一对好朋友 ...
- ios新特征 ARC详解
IOS ARC 分类: IOS ARC2013-01-17 09:16 2069人阅读 评论(0) 收藏 举报 目录(?)[+] 关闭工程的ARC(Automatic Reference Co ...
- 转:如何找出发生SEGV内存错误的程序
原文来自于:http://www.searchtb.com/2014/03/%E5%A6%82%E4%BD%95%E6%89%BE%E5%87%BA%E5%8F%91%E7%94%9Fsegv%E5% ...
- 工作总结：检查字符串合法性(C++)
BOOL CLiftCtrlModbusConfigDlg::CheckValid(const CString &str) { ASSERT(str.GetLength() > ); ] ...
- SharePoint Designer cannot open site error " the server could not complete your request"
3.SPD cannot open site, in the log :Error when open web service: System.InvalidOperationException: A ...
- codeforces Dima and Bacteria
题意:给出n,m和k,表示有n个细菌,m种仪器和k种细菌,给出k种细菌的数量ci,然后每个细菌按照种类排成一排(所以有第i种细菌的序号从∑(1≤j≤i-1)cj + 1 到∑(1≤j≤i)cj):接下 ...
- Black Box《优先队列》
Description Our Black Box represents a primitive database. It can save an integer array and has a sp ...
- 电容式触摸控制器PCB布局
在目前市场上可提供的PCB(印刷电路板)基材中,FR4是最常用的一种.FR4是一种玻璃纤维增强型环氧树脂层压板,PCB可以是单层或多层. 在触摸模块的尺寸受限的情况下,使用单层PCB不是总能行得通的, ...
- -_-#setTimeout与setInterval
你真的了解setTimeout和setInterval吗? 存在一个最小的时钟间隔 有关零秒延迟,此回调将会放到一个能立即执行的时段进行触发.JavaScript 代码大体上是自顶向下执行,但中间穿插 ...
- 【模拟】Codeforces 710A King Moves
题目链接: http://codeforces.com/problemset/problem/710/A 题目大意: 国际象棋标准8X8棋盘,国王能往周围8个方向走.输入国王的位置,输出当前国王能往几 ...