py知识(每日更新) 8.9

Posted 2022-06-24 lyoko1996

Title

内容回顾

块级标签

排版标签

p,div,hr
p块的上下有一些空白
hr是一条线
div是没有任何效果的块标签

列表

ol,ul,dl
ul li 
    type:disc square circle none
ol li 
    type:a A I 1 i start:2
dl dt dd

表格

table
thead :tr表示行 th表示cell  /*可有可无*/
tbody :tr表示行 td表示cell
    border边框的线宽 cellpadding和内容的距离 cellspacing和外边框的距离
    colspan合并行 rowspan合并列

表单

form action=‘url‘
input
    # type : text,password,radio,checkbox,submit,button,reset,hidden,file,date
    # name\value
    # radio,checkbox : checked
    # text,password:readonly 可以提交到后台,但不能修改
    # text:placeholder输入框的默认提示语
    # disabled 不能修改,也不能提交到后台
button : 如果放在表单内也可以表示提交
select 
    # 默认单选 size 设置多选multiple name属性
    # option value属性 selected表示默认选中
label : 和input  for=‘text/password设置了id‘,label被点击的时候input框获得焦点
textarea :文本框 rows cols设置大小 name属性

css

css的引入方式

行内样式 
内接样式 
<style>
  div
      color:red;
  
</style>
外接样式(链接式,导入式)
<link href=‘xxxx.css‘>
<style>
    @import url(‘地址‘)
</style>

几个基础样式

width 宽
height 高
background-color 背景色
color 字体颜色

选择器

基础选择器

标签选择器 : a div p span 
类选择器 : .类名
id选择器: #id名
通用选择器: *

高集选择器

后代选择器:div p 表示div标签下的所有的p标签
子代选择器:div>p 表示div下面一层所有的p标签
毗邻选择器:div+p 找div的兄弟标签中的下一个p标签
弟弟选择器:div~p 找div下的所有弟第p标签
属性选择器:div[title] div[title=‘aaa‘] 找到所有含有title属性的div/找到所有title属性=‘aaa‘的div
并集选择器:ul,li 所有,分隔的标签都要找到
交集选择器:div.aa 找所有class=‘aa‘的div标签
伪类选择器:a:active鼠标按下 link连接未访问之前 visited连接访问后
         input:focus 输入框获得焦点
         hover:鼠标悬浮
伪元素选择器:first-letter第一个字的样式 
           before(after)值这个标签的前面(后面)加content,给这个content设置样式

今日内容

css选择器优先级

回到顶部

行内>id选择器>类选择器>标签选择器>继承
1000  100    10       1       0
所有的值可以累加但是不进位
优先级如果相同,写在后面的生效
div.a
    background-color: green !important; 提高样式的优先级到最高

颜色表示

rgb表示法:
	rgb :red green blue 光谱三原色
	rgb(255,255,255) 白色
	rgb(0,0,0) 黑色
16进制的颜色表示法
	#000000-#FFFFFF
	#000 - #FFF
单词表示法:
	# red green
rgba表示法:
	#a表示的是透明度 0-1,0是完全透明,1是不透明
https://htmlcolorcodes.com/zh/yanse-ming/

字体

p
   font-family: ‘Microsoft Yahei‘,‘楷体‘,‘仿宋‘;
   font-weight: bold;
   font-size: 12px;

文本

text-align 文字的水平对齐
	left 左对齐
    center 居中
    reght 右对齐
text-decoration 文本装饰
    none;         没有下划线
    line-through; 中划线
    overline;     上划线
    underline;    下划线

text-indent 文本缩进
	text-indent: 2em; em单位是一个相对单位,相对当前字体大小的像素是1em

line-height	行高,设置行高=容器高度,文字自动垂直居中
	line-height: 200px;

color:设置字体颜色

背景图片

background-color: red;   在没有背景图片覆盖的范围显示背景颜色
background-image: url(‘timg.jpg‘); 设置背景图片
height: 400px;
width: 400px;
background-repeat: no-repeat; 设置图片不重复   repeat-x水平重复   repeat-y垂直重复
background-position: right top; 图片的位置    左中右x 上中下y
/*left center right /top center bottom*/
background-attachment: fixed; 在窗口中固定图片的位置
background:red url("timg.jpg") no-repeat left center;  把所有的设置综合写在background中

边框的设置

            width: 100px;
            height: 100px;
            /*border-color: tomato green gray yellow;*/
            /*border-width: 1px 3px 5px 7px;*/
            /*border-style: solid dotted dashed double;*/
            /*一个值:上下左右
            四个值:遵循顺时针上右下左
            三个值:上 右左 下
            两个值:遵循上下 左右
            */
            /*border-top-style:solid ;*/  单独设置顶线的样式(left,bottom,right)
            /*border-left-style:solid ;*/ 单独设置左边线的样式
            /*border-top-color:red;*/     单独设置顶线颜色
            border:yellow solid  10px;    统一设置边框的颜色 样式 宽度

块和行内的概念\转换

对于行内标签来说不能设置宽和高
有些时候需要行内标签也设置宽和高,需要进行行内-->块,行内->行内块
display的属性值 : block块  inline行内 inline-block行内快 none
display: block;        独占一行并且可以设置宽高
display: inline-block;  既可以设置宽高又不会独占一行 行内\块转行内快
display: inline;        表示一个行内元素,不能设置宽高
display: none;          不仅不显示内容,连位置也不占了

盒模型

border  : 边框的宽度
padding : 内边距的距离
content : width height
背景包含的部分:padding + conntent
计算一个盒子的总大小: 宽width+2padding+2border 高height+2padding+border
外边距 margin
    上下的盒子如果设置bottom和top会导致塌陷,取两个设置的最大值作为外边距
margin: 0 auto;表示左右居中(父盒子宽度,子盒子宽度)

分方向的设置
border-top border-right  border-bottom border-left
padding-top padding-right  padding-bottom padding-left
margin-top margin-right  margin-bottom margin-left

给图形设置圆角
border-radius: 5px;

列表样式

在css中去掉列表的样式
ul,li
   list-style: none;

浮动

float:left /right
浮动的元素会脱离标准文档流,原本块级元素就不再独占整行了
并且在原页面中也不占位置了,之后的元素会挤到页面上影响页面的排版
清除浮动 clear:both
伪元素清除法:
        .clearfix:after
            content: ‘‘;
            clear: both;
            display: block;
        
<body>
<div class="father clearfix">
<div class="box"></div>
<div class="box"></div>
</div>
<div class="main">
    主页的内容
</div>
</body>

overflow

内容多余标签的大小
visible 可见(默认)
hidden 超出部分隐藏
scroll 超出显示滚动条

定位

position : relative /absolute /fixed
top:10px;
right:10px;
bottom:10px;
left:10px;
相对定位 :相对自己原来的位置移动,移动之后还占据原来的位置
绝对定位 :绝对定位是相对于整个html页面,不会占据原来的位置,层级的提升
		如果我们设置了绝对定位的元素 的父元素 没有设置position,那么我们对元素的所有设置都是基于整个页面
		如果设置了position,那么子盒子的absolute位置会根据父盒子的位置定位
		父相子绝:子元素设置的绝对位置会对应着祖级元素的相对位置
固定定位 :固定是相对于整个窗口的

z-index

用法说明:
z-index 值表示谁压着谁，数值大的压盖住数值小的，
只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
从父现象：父亲怂了，儿子再牛逼也没用

opacity

opacity: 0.5;调整d4对应的整个标签的透明度是50%
.d4
    opacity: 0.5;

<div class="d4">
    你好你好娃哈哈
	<img src="timg.jpg" >
</div>