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. 转:.NET中使用Redis (一)

    原文来自于:http://blog.jobbole.com/83821/ 原文出处: 寒江独钓   欢迎分享原创到伯乐头条 Redis是一个用的比较广泛的Key/Value的内存数据库,新浪微博.Gi ...

  2. codeforces C. Devu and Partitioning of the Array

    题意:给你n个数,然后分成k部分,每一个部分的和为偶数的有p个,奇数的有k-p个,如果可以划分,输出其中的一种,不可以输出NO; 思路:先输出k-p-1个奇数,再输出p-1个偶数,剩余的在进行构造.  ...

  3. cf D. On Sum of Fractions

    http://codeforces.com/problemset/problem/397/D 题意:v(n) 表示小于等于n的最大素数,u(n)表示比n的大的第一个素数,然后求出: 思路:把分数拆分成 ...

  4. 我的VSTO之路：序

    原文:我的VSTO之路:序 VSTO是微软提供给.Net开发人员的一个接口,通过他我们可以对Office程序做一些处理.但是这个接口并不尽善尽美,相比微软的很多其他产品,VSTO的稳定性并不好,相关的 ...

  5. [C#] - 注入DLL

    原文:http://xyzlht.blog.163.com/blog/static/69301417200882834211787/ ) { MessageBox.Show("创建远程线程失 ...

  6. 如何使用json在前后台进行数据传输

    上一篇博客写到用javascript生成多组文本,可以让数据的输入不受显示,现在我们需要把这些输入写入数据库,这里就用到json传入. 首先,我们来写一下后台如何生成要传输的数据 function g ...

  7. fedora下体验gentoo安装

    服务器上安装了fedora,但是对gentoo很想体验一番,没有新机器,不想重装系统,所以只能chroot来体验getoo了. 下载portage-20130817.tar.bz2和stage3-am ...

  8. ikely()与unlikely() 都等同于if， 此处只是做编译优化

    ikely()与unlikely()在2.6内核中,随处可见,那为什么要用它们?它们之间有什么区别呢? 首先明确: if (likely(value))等价于if (value)if (likely( ...

  9. Blue Jeans(串)

    Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 10083   Accepted: 4262 Description The ...

  10. bzoj2588

    一开始一看树上的操作,就无脑写了树链剖分+主席树 然后果断T了,因为树链剖分+主席树必然带来两个log的复杂度 而且树链剖分复杂度还比较大…… 后来发现其实没必要,在这道题,我们可以直接利用主席树维护 ...