CSS个人学习笔记

content 内容区

元素中所有子元素和文本内容都在内容区排列

内容区大小由width和height属性设置

width 设置宽度

height 设置高度

padding 内边距

共有四个方向的内边距：

padding-top、right、bottom、left

内边距会影响盒子大小，背景颜色会延伸到内边距上

盒子的可见框总大小 由内容区、内边距和边框共同决定

padding 内边距简写属性，可以同时指定四个方向的内边距，和border-width一样

border 边框

属于盒子边缘，边框里属于盒子内部，边框外都是盒子外部

设置边框，至少设置三个样式：（三个缺一不可）

1. 宽度 border-width (默认3px)

   border-width：10px 20px 30px 40px

   ​ 上 右 下 左

   四个参数：还可以规定各个边的宽度

   border-width：10px 20px 30px

   三个参数： 上 中 下

   border-width：10px 20px

   两个参数 ： 上下 左右

2. 颜色 border-color

   用来改变颜色，也可以分别指定四个颜色

   border-color： red red red red

3. 样式 border-style

   border-width:10px;
   border-color:red;
   border-style:solid;//实线
   

   none 无边框（默认）

   solid 表示实线

   dotted 点状虚线

   dashed 虚线

   double 双线

   依然可以分别设置四个边框格式

边框会影响盒子大小 边框10px，如果盒子高度200px，则总共高度220px

可以直接border 简写属性

border：solid 10px orange

参数顺序可以调换

margin 外边距

外边距不会影响盒子可见框大小，影响盒子的位置

一共有四个方向的外边距 margin-top、right、bottom、left

例：

margin-top :100px;//上外边距，设置一个正值，元素会向下移动

margin也可以设置负值，如果为负，则会往相反的方向走

margin简写属性

margin：100px (一个参数、两个参数、三个参数、四个参数都可以)

margin会影响盒子实际占用的空间

水平布局

元素在其父元素水平方向的位置由以下属性共同决定

margin-left

border-left

padding-left

width

padding-right

border-right

margin-right

width、margin-left、margin-right可以设置为auto

如果宽度和外边距设置为auto，则宽度会调整到最大，外边距为0

如果将三个值都设为auto，则外边距都是0，宽度最大

如果两个外边距设为auto，宽度固定，则会将外边距设置会相同的值

所以可以利用这个特点 使一个元素在父元素中水平居中

width:100px;
margin:0 auto;//0表示上下边距0，左右auto自动水平居中

垂直布局

溢出

如果父元素不设置高度，默认情况父元素高度会被内容撑开，写上不会撑开。

子元素在父元素内容与排列，如果高度大于父元素，会超出，撑破盒子。

可以在父元素设置overflow属性处理溢出的子元素，可选值：

1. visible默认值 子元素会从父元素溢出，在父元素外部的位置显示
2. hidden溢出内容将会被裁剪 不会显示
3. scroll生成两个滚动条，通过滚动条来查看完整的内容
4. auto根据需要生成滚动条

overflow-x：单独处理水平方向溢出

overflow-y：单独处理垂直方向溢出

外边距的折叠

上元素的margin-bottom：100px

下元素的margin-top：100px

俩元素之间距离仍是100px

相邻的垂直方向外边距会发生重叠现象

兄弟元素间

兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值）

特殊情况：相邻外边距一正一负，则距离取两者和

​ 相邻外边距两个都是负值，取绝对值较大的

兄弟元素之间的外边距充电，对于开发是有利的，不需要处理

父子元素

父子元素之间相邻外边距，子元素的会传给父元素（上外边距）

父子外边距的折叠会影响到页面布局，必须处理

临时解决方案：

通过父元素padding-top来代替margin效果

通过给父元素添加边框，使父子元素的外边距不相邻

行内元素盒模型

行内元素不支持设置宽度和高度，(不能通过宽高设置内容区大小，只能通过内容)

行内元素可以设置padding，但是垂直方向padding不会影响页面布局(不会挤走别人，但有可能覆盖)

行内元素可以设置border，垂直方向的border不会影响布局

行内元素可以设置margin，垂直方向margin不会影响布局

a中的超链接属于行内元素

display

用来设置元素显示类型

1. inline设置为行内元素

2. block设置为块元素

3. inline-block设置会行内块元素

   ​ 既可以设置宽高又不会独占一行

   ​ 行内块元素之间会有空隙

4. table将元素设置为一个表格

5. none元素不在页面显示

visibility

用来设置元素的显示状态

1. visible默认值 元素在页面中正常显示
2. hidden元素在页面中隐藏 不显示 占据位置

浏览器默认样式

通常情况下，浏览器都会为元素设置一些默认样式

默认样式的存在会影响到页面的布局，通常情况下编写网页必须去除掉浏览器的默认样式(PC端的页面)

F12可以查看元素

默认样式在父元素body里

简单方法

"较麻烦"///
body{
    margin: 0px;
}
p{
    margin:0px;
}
ul{
    margin:0;
    padding:0;
    margin-left:20px;//不然会藏起来，设置left可以调出
    list-style:none;//去除项目符号
}


/最简单方法,有残留 不完美
*{
    margin:0;
    padding:0;
}

重置样式表–最完美

<link rel="stylesheet" href="./moren.css">

1. normalize.css

   对默认样式做了统一

2.reset.css(moren.css)

直接去除了浏览器的默认样式

盒子的大小

默认情况，盒子可见框的大小由内容区、内边距和边框共同决定

box-sizing用来设置盒子尺寸的计算方式（设置width和height的作用）

1. content-box默认值，宽度高度用来设置内容区的大小

2. border-box宽度和高度用来设置整个盒子可见框的大小

   width和 height指的是内容区和内边距和边框的总大小

轮廓阴影和圆角

阴影

outline用来设置元素的轮廓线，用法和border一模一样

轮廓和边框不同的点，就是轮廓不会影响可见框的大小，有可能会挡住其他元素

box-shadow用来设置元素的阴影销过，也不会影响页面布局

默认阴影在元素重合正下方

box-shadow：Apx Bpx Cpx color

1. Apx值影响阴影的水平位置(正值阴影向右移动，负值相反)

2. Bpx值影响阴影的垂直位置(正值向下移动，负值相反)

3. Cpx 值阴影的模糊半径

4. color 阴影的颜色

圆角

border-radius用来设置圆角，圆角设置圆的半径大小

border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius

可以设置两个参数

1. 一个参数，正圆，代表半径
2. 两个参数，椭圆，代表各个半径

border-radius可以费别指定四个角的圆角

1. 四个值： 左上 右上 右下 左下
2. 三个值 左上 右上/左下 右下
3. 两个值 左上/右下 右上/左下
4. 50%圆形

浮动简介