css学习笔记
- css选择器
- css常用属性
- css盒子模型
- css浮动
- css定位
css选择器
1.css选择器在head标签里面
css元素选择器
<style>
/*元素选择器*/
h2{
color:aqua;
}
</style>
<body>
<h2>这是元素选择器</h2>
</body>
元素选择器，在head标签中的style标签里面设定字体大小或者字体颜色。在body中加上h2标签，这样h2标签中的内容就会应用元素选择器设置的配置了
2.css之class类选择器
<style>
.hightlight{
background-color: yellow;
}
</style>
<body>
<h3 class="hightlight">这是一个类选择器</h3>
</body>
快速写出
只需要输入h3.hightlight就可以了
按照上面输入的话，会出现class。
如果想要出现id的话，h3#header就可以了
3.css之id类选择器
<style>
#header{
font-size: 35px;
}
</style>
<body>
<h3>这是另外一个类选择器</h3>
</body>
和上面的很相似，只不过一个是class，一个是id。class用点号。id用#号
4.css选择器全部应用
使用*
<style>
* {
background-color: pink;
}
</style>
会出现粉色背景
5.css之子元素选择器
<style>
.father > .son{
color:red;
}
</style>
<head>
<div class="father">
<p class="son">这是一个子元素选择器</p>
<div>
<p class="grandson">这是一个后代选择器</p>
</div>
</div>
</head>
子选择器通常应用在div中。在style标签中，使用.父名字 > .子名字来对子元素进行操作。只针对p标签
6.css之相邻选择器
<style>
h3 + p {
background-color: red;
}
</style>
<body>
<p>这是一个普通的p标签</p>
<h3>这是一个相邻兄弟选择器</h3>
<p>这是另一个p标签</p>
</body>
这个会对h3后面的p进行操作
css常用属性
1.css块级元素，在div标签内
<style>
.block{
background-color: aqua;
}
</style>
<body>
<div class="block">这是一个块级元素</div>
</body>
如果代码换成了如下，会得到每一行都是单独的一行
<body>
<div class="block">这是一个块级元素</div>
<div class="block">这是一个块级元素</div>
<div class="block">这是一个块级元素</div>
</body>
块级元素独占一整行，且设置背景颜色的时候也是，即使没有文字
2.行内元素，在span标签内
<style>
.inline{
width: 200px;
height: 300px;
background-color: blue;
}
</style>
<body>
<span class="inline">这是一个行内元素</span>
</body>
后面是空白的，如果我们此时把代码换成如下
<span class="inline">这是一个行内元素</span>
<span class="inline">这是一个行内元素</span>
<span class="inline">这是一个行内元素</span>
所以行内元素是一直往后去排列，知道排不下。
3.css行内块元素
<!-- 行内块元素 -->
<img src="1.jpg" alt="" class="inline-block">
<img src="1.jpg" alt="" class="inline-block">
4.css块级元素转换行内元素
<style>
.div-inline{
display: inline;
background-color: red;
} </style>
<body>
<div class="div-inline"> 这是一个转换行内元素的div标签</div>
</body>
5.css行内元素转换成行内块元素
<style>
.span-inline-block{
display: block;
background-color: blue;
width: 200px;
}
</style>
<body>
<span class="span-inline-block">这是一个转换成行内块的span标签</span>
</body>
css盒子模型
设置边框，行内块元素，display设置=inline-block，可以设置宽度，高度等
<style>
.demo{
background-color: aqua;
display: inline-block;
border: 5px solid brown;
}
</style>
<body>
<div class="demo">csdn搜索柯西不等式</div>
</body>
上面的是简写，border后面分别代表的是，边框宽度，边框类型：实线，虚线，边框颜色
也可以按照下面的写，注意border-width 可以设置4个数值，分别对应上右下左
border-width: 5px;
border-style: solid;
border-color: brown;
css浮动
浮动，在子标签中使用float：left/right来设定
overflow：hidden可以解决重新输入文本框链接在浮动块级的后面导致排版不好看的问题
<style>
.father{
background-color: aquamarine;
border: 3px solid brown;
overflow: hidden;
}
.left-son{
width: 100px;
height: 100px;
border: 30px solid red;
background-color: yellowgreen;
float: left;
}
</style>
<body>
<div class="left-son">左浮动</div>
<div class="left-son">左浮动</div>
<div class="left-son">左浮动</div>
<div class="left-son">左浮动</div>
<div class="left-son">左浮动</div>
<div class="left-son">左浮动</div>
<div class="left-son">左浮动</div>
</body>
css定位
1.相对定位不会脱离原来的位置，在指定的div标签中，加上position: relative;
<style>
.box1{
height: 350px;
background-color: aqua;
}
.box-normal{
width: 100px;
height: 100px;
background-color: purple;
}
.box-relatve{
width: 100px;
height: 100px;
background-color: pink;
position: relative;
left: 120px;
top: 40px;
}
</style>
<body>
<h1>相对定位</h1>
<div class="box1">
<div class="box-normal"></div>
<div class="box-relatve"></div>
<div class="box-normal"></div>
</div>
</body>
2.绝对定位 会脱离原来的位置
<style>
.box2{
height: 350px;
background-color: yellow;
}
.box-absolute{
height: 100px;
width: 100px;
background-color: red;
position: absolute;
left: 120px;
}
</style>
<body>
<h1>绝对定位</h1>
<div class="box2">
<div class="box-normal"></div>
<div class="box-absolute"></div>
<div class="box-normal"></div>
</div>
</body>
3.固定定位 会固定在某一个位置不会随着滚动而改变位置
<style>
.box3{
width: 100px;
height: 100px;
background-color: brown;
position:fixed;
right: 0;
top: 300px;
}
</style>
<body>
<h1>固定定位</h1>
<div class="box3"></div>
</body>
