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的更多相关文章

  1. 2020年12月-第02阶段-前端基础-CSS Day03

    CSS Day03 盒子模型(CSS重点) css学习三大重点: css 盒子模型 . 浮动 . 定位 主题思路: 理解: 1.能说出盒子模型有那四部分组成 2.能说出内边距的作用以及对盒子的影响 3 ...

  2. css.day03.eg

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  4. 2021年3月-第02阶段-前端基础-HTML+CSS阶段-Day03

    HTML5 第三天 一. 认识 3D 转换 3D 的特点 近大远小 物体和面遮挡不可见 三维坐标系 x 轴:水平向右 -- 注意:x 轴右边是正值,左边是负值 y 轴:垂直向下 -- 注意:y 轴下面 ...

  5. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  6. Day03 javascript详解

    day03 js 详解 JavaScript的基础 JavaScript的变量 JavaScript的数据类型 JavaScript的语句 JavaScript的数组 JavaScript的函数 Ja ...

  7. day03 Django目录结构与reques对象方法

    day03 Django目录结构与reques对象方法 今日内容概要 django主要目录结构 创建app注意事项(重点) djago小白必会三板斧 静态文件配置(登录功能) requeste对象方法 ...

  8. java-前端之css

    css样式: <!-- 内联样式:在元素的style属性内写样式 --> <h2 style="color: red;">愿你单枪匹马,亦能所向披靡!< ...

  9. CSS的未来

    仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...

随机推荐

  1. 优秀开源项目的svn地址

    很多优秀的开源项目已经提供SVN源码签出了,无论是解疑还是学习,都是一大幸福之事啊! Apache的SVN库,强烈推荐! http://svn.apache.org/repos/asf/ 里面不但有S ...

  2. 转:php中实现精确设置session过期时间的方法

    原文来自于:http://www.jb51.net/article/52309.htm 大多数据情况下我们对于session过期时间使用的是默认设置的时间,而对于一些有特殊要求的情况下我们可以设置一下 ...

  3. Windows Phone 8学习 启动器

    1.发邮件 EmailComposeTack email=new EmailComposeTask(); email.To="收件人"; email.Subject="标 ...

  4. 常见的三种Web服务架构

    常见的三种Web服务架构 转自http://www.cnblogs.com/bvbook/archive/2008/12/24/1360942.html 相互竞争的服务架构 The Competing ...

  5. WINDOWS下的SALT-MINION安装流水图

    简单的下一步下一步, 没多少说的,可以在安装的时候设置MASTER和MINION的东东.. 不多说,上图:

  6. MFC任务管理器task manager----进程的挂起与恢复--NtSuspendProcess&&NtResumeProcess

    http://hi.baidu.com/xbbsh/blog/item/b73d3125462201084c088db1.html ---------------------------------- ...

  7. github上值得研究的项目和人

    https://github.com/Dax89?tab=repositories https://github.com/stars/gabrielcorado https://github.com/ ...

  8. SQL Server 全文搜索 配置、查询初体验

    原文:SQL Server 全文搜索 配置.查询初体验 一.使用SQL Server全文搜索配置 要使用SQL Server的全文搜索服务,需要进行如下配置. 1.开启全文搜索服务: 2.开启数据库的 ...

  9. （转载）教你在PHP中使用全局变量

    (转载)http://www.chinaz.com/program/2009/0123/64261.shtml 即使开发一个新的大型PHP程序,你也不可避免的要使用到全局数据,因为有些数据是需要用到你 ...

  10. 使用yum快速升级CentOS 6.5内核到 3.10.28

    网上有不少升级CentOS内核的文章,如<CentOS 6.5 升级内核到 3.10.28>,大部分都是下载源码编译,有点麻烦. 在yum的ELRepo源中,有mainline(3.13. ...