htmlCss---pc端页面

一、pc端页面特点：

　　　　在开发pc端之前首先要观察我们做的这个页面是通栏的页面，还是版心的页面

一、通栏：就是横跨整个页面，这种情况是通栏。

二、版心：版心的意思，就是有些内容并不是横跨整个页面的，

　　　　他们有一个固定的宽度，而这个宽度是不管你的电脑屏幕大小的，

　　　　如果你的屏幕大于我们所定的版心，那么这种情况你所看到的所有内容就是放在整个页面的中间。

　　　　如果你的屏幕比版心小的话，你的屏幕就会出现横向滚动条。

三、非块级元素默认是摆放在基线上的，基线和底线是有距离的，

　　　（这个距离大小取决去字体大小），所以我可以通过设置font-size：0

　　　　来消除基线和底线之间的距离。

　　　　相邻的非块级元素之间由于书写源代码时采用车进行排版，

　　　　会造成他们之间在显示代码的时候有一个空格存在，我们也可以用 font-size = 0来消除。

四、隐藏

4.1.overflow: hidden; 隐藏，

　　　　　　理解：如果要实现横向布局，就要给ul设置一个外边距，这个外边距要超出div父元素一定距离(这个距离可以自己设置)，

　　　　　　设置完之后就给li这个设置一个外边距来显示缝隙。显示出我们想要的结果，但是ul还是超出div这个父元素的，

　　　　　　如果不进行隐藏的话，会出现横向滚动条，所以需要在div这个父元素上设置 overflow：hidden进行隐藏掉。

4.2：overflow :scroll :在竖直上出现滚动条。

　　这个使用之后，一行内写很多内容，当内容只有文字。到头就会换行这一个特性，这　　个是有文字有这个特性。

　　但是里面如果不是文字的话就会出现水平滚动条

　　overflow-x 水平方向进行隐藏。

　　overflow- 竖直方向

overflow：两个方向：auto:自动、scroll；在竖直上出现滚动条

　　、hidden;把2多余的隐藏掉

3　　单行文本超出时出现省略号：不想换行：

　　　字少的时候不会出现，字多的时候才会出现省略号

　　　　这个是固定写法

　　　　　　overflow:hidden; //溢出隐藏

　　　　　　text-overflow:ellipsis; //文本太多出现省略点

　　　　　　white-space:nowrap: //强制不换行

　　　　出现的省略号不是HTML里面的内容而是css样式

　　　　所在在运行查看的时候省略号是不能选中的.

五、居中、

　　　　5.1版心

　　　　　　版心中margin: 0 auto; 这个只有是行内元素才可以进行居中重要？？？？

　　　　5.2文本：

　　　　　　文本中 text-align: center;进行水平居中，

　　　　　　　　　line-height:行高；行高等于高度的时候就可以进行垂直居中

　　　　　　文字有一个特点：在垂直方向文字永远居中行的中间。

六、盒子：

样式	属性名	样式	属性名
边框	Border	宽度	width
内边距	Padding	高度	height
外边距	Margin	盒模型	box-sizing
文本对齐	Text-align	行高	Line-height
背景颜色	Background-color	字体颜色	Color

6.1边框：

　　　格式：首先每一个边框都有三个方面

　　　　　　宽度线的状态线的颜色。

6.1.1线的状态： border-style:dotted solid double dashed;

　　　　　　6.1.1定义单边样式：boder-left-style:none:左边没有边框

　　　　　　　　　　　　　第一种：p {border-style: solid solid solid none;}

　　　　　　　　　　　　第二种： p {border-style: solid; border-left-style: none;}

　　　　　　 注意：如果要使用第二种方法，必须把单边属性放在简写属性之后。因为如果把单边属性放在 border-style 之前，简写属性的值就会覆盖单边值 none。

6.1.2边框的颜色

　　　　边框的颜色设置像margin一样可以上下左右单独设置，同时可以设置透明颜色。

6.2：内边距：

　　　　含义：内边距就是内容和边框的距离

6.3：外边距： magrin

　　　　含义：外边距就是两个内容之间的距离

　　　　外边取负值

　　　　外边距取负值一般和隐藏等有联系

　　　　提示：内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。

　　　　提示：外边距可以是负值，而且在很多情况下都要使用负值的外边距。

6.4：外边距合并，取最大的那个。

6.5：盒模型

　　　　盒子模型分为两种情况：1.标准盒模型 2IE盒模型

　　　　6.5.1：标准盒模型（box-sizing:cotent-box）width=content;

　　　　6.5.2:IE盒模型（box-sizeing:border-box） width = boder+padding+content,如果要设置边框就要改变盒子模型

6.6：背景颜色：background-color :pink //背景颜色；

6.7背景图片：

　　　　6.7.1：background :pink url no-repeat;

　　　　　　　参数解释：背景颜色图片地址存放的图片不可以重复

　　　　　　　设置：图片位置 background-position: center

　　　　　　　 指定图图片在块状元素中的位置

　　　　　　　 center/right/left

　　　　　　　no-repeat ：图片不重复　

　　　　　 语法：background: #f00 url no-repeat center center

　　　　　　　　 解释：背景颜色图片地址图片不重复 水平方向上居中垂直方向上居中

　　　　　　　　　background-position:( center)top、bottom\center (center)left\center\right //图片的内容进行移动。

　　　　　6.72、图片不是内容是背景，如果img在DIVZ中写的化，就会出现溢出。但是背景是不会出现溢出情况/

　　　　　　　　所以只用：background-size(设置图片大小)

　　　　　6.8：图片截取

　　　　　　　　　　把选择之外的全部裁切掉。

　　　　　　　　　　background-clip:padding-box;把盒子之外的图片全部裁切掉

　　　　　　　　　　background-clip:contnt-box:把内容意外的所有图片全部剪切掉

　　　　　　　　　　background-clip：border-box

　　　　　　　　　　定位基准和图片裁切不是一样的

　　　　　6.9：背景图片定位原点：

　　　　　　　　　　background-origin:默认是从内边距开始。但是我们可以更改

　　　　　　　　　　background-origin:boder-box|padding-box|content-box

　　　　　　　　　　默认值

　　　　　　　　　　background-origin：padding-box

　　　　　6.10雪碧图：

　　　　　　　　　　在网上搜索：雪碧图icon然后救出出现各种各样的雪碧图

　　　　　　　　　　定位：bachground: url(图片地址) no-repeat center center

　　　　　　　　　　url(图片地址):雪碧图的地址：

　　　　　　　　　　no-repeat：不重复

　　　　　　　　　　center center：给雪碧图里面需要的然后进行定位。

　　　　　　　　　　雪碧图：将大量尺寸相同相似的小图标，整合到一张图片上，以减少服务器的请求数目

　　　　　　　　　　在使用小图标时，使用背景图定位原理，定位具体要使用的图片。

　　　　　　　　　　background-size：1.可以是固定像素。

　　　　　　　　　　2.也可以是百分百。当一个设置百分百的时候另一个要设置自动（关键字auto）不如就会出现拉伸或者。

　　　　　　　　　　根据背景定位原理进行设置背景图片的定位。

　　　　　　　　　　auto:表示自动调整

　　　　　　　　　　contain：自动调整让块状元素能包含这个背景图片（优先让图片整个的显示出来）

　　　　　　　　　　cover：自动调整，图片覆盖整个背景区域

=============================================================================================================================

　　　　　　　　　　透明色：透明不是一种颜色，因为任何一中东西都可以是透明。

　　　　　　　　　　透明有两种：

1 opacity：透明度。
2     值：0~1之间。0:完全透明；1:不透明。
3     问题：在背景透明的过程中会把元素上的文字一起透明。
4 
5 rgba：透明。仅透明背景。格式：(数字,数字,数字,opacity值)。
6     说明：前三个数字为rgb值，最后一个参数为opacity的值。
7          rgba是写在backgroud里面的。
8     示例：background:rgba(0,0,0,0.5)-->背景颜色为黑色，透明度为0.5

　　　　　　　　　　透明实际上是设置一种alpha通道rgb(255,0,0) 红色

　　　　　　　　　　　　重要的透明色：；：：rgba（255，0，0，0.5），alpha通道的值是1~1直接按，

　　　　　　　　　　　　1就是不透明

　　　　　　　　　　　　0就是纯透明

　　　　　　　　　　　　边框（给边框设置透明色）是可以显示背景图片的，内边距默认情况下是显示图片的

　　　　　　　　　　　　外面居是不显示图片。

　　　　　　　　　　　　以左上方是原点　　

七、横向布局：横向布局的之后会出现空格，这个空是因为在编程过程中　因为回车或者空格产生的

　　　　　　　　消除空格：要想消除空格，就要给产生空格的父亲设置 fongt-size:0;　　　　　　

二、等分横向布局插缝的代码：

　　　　第一、首先在写代码之前要先进行分析一下

　　　　首先在html标签上进行分析。把标签布局好之后，

　　　 div--》ul -->li -->a -->img

　　　　第二、在css上进行分析

　　　把所有的情况的css都展示出来。

　　　　第三：

　　　　　　展示出来之后进行分析：

　　　　　　　　　　首先要设置共同样式：公共样式分别是 *{} .w ul

三、在开发中尽量不要设置高度，因为在页面上所有的高度都是由内容撑起来

四、同样在开发过程中不要设置宽度，因为不设置宽的话，就会有流体性。

五、

版心元素：宽度固定，水平居中。

margin 只对块级元素生效

在写代码的时候尽量少些高度，让内容去撑起来

在开发过程中内联元素与内联元素，进行换行时，会被默认成空格。

解决水平空格的方法：字符设置0

上下有空格：非块级元素房子基线上。

a 是内联元素设置宽高无效。

htmlCss---pc端页面

推荐阅读