css3

最新推荐文章于 2022-01-23 09:33:56 发布

爱吹牛的小L

最新推荐文章于 2022-01-23 09:33:56 发布

阅读量149

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/qq_34921840/article/details/78768272

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

.a{
   border-top-style:soild 实线;//dotted 点线 dashed 虚线
   boeder连写：
   border-top：边框颜色格式宽度//red soild 10px,中间那个不能少
   边框合并
   border-collapse:collapse;

   给input增加边框，得先去掉input自带的边框
   border:0 none;//去边框
   border-style:0 none;
   outline-style:none;//去轮廓线
} */

   .username:focus{/* //js和css结合 */
       background: red;
   }
</style>
<body>
   
   

   
   <label for="username">用户：</label>
       <input type="text" class="username" id="username" name="username">

   内边距会撑大盒子
   指定B在A内部的方位   对A用padding
   盒子宽度：定义宽度+边框+左右内边距

   继承的盒子不会被撑大
   对B用padding没任何作用，除非padding大小大于A才会显示出来
   <A>
       <B>
   </A>

   指定B在A内部的方位
   对B用margin 此时会造成A塌陷然而B不动，直接造成A和外面盒子产生距离
   解决方案：给A设置边框或者给A加overflow：hidden

   float:left
   浮动的盒子在一行显示，
   行内元素浮动后转化为非行内块元素

   作用：文字饶图
          制作导航   font:14px/40px 微软雅黑；（文字大小/行高字体格式），设置行高，如果是行内块需要在前面加上display:inline-block

       当父盒子没定义高度，子盒子在浮动，则父盒子下面的元素会发生未知错误
           清除浮动产生的影响：方法一.在最后一个浮动元素后添加标签clean:both
                               方法二.父级加上overflow:hidden（如果有浮动的内容（margin-top:-100）出了父级盒子，则不起作用,直接把超出的干掉了）
                               方法三.给浮动元素的父级加上
                                       浮动的父级元素：after{
                                                           content："";
                                                           height:0;
                                                           display:block;
                                                           line-height:0;
                                                           visibility:hidden;
                                                           clear:both;
                                                       }
                                       兼容IE浏览器
                                                   浮动的父级元素{
                                                       zoom:1;
                                               }

  overflow:hidden;超出盒子的内容将不可见
   overflow：visible;超出盒子的内容可见，没有滚动条
   overflow：scroll；超出盒子的内容会被修剪，但是会以滚动条方便查看，没出盒子也有滚动条
   overflow：auto；超出盒子的内容会被修剪，但是会以滚动条方便查看，没出盒子没有滚动条


   position：static;静态定位//
   position:absolute;绝对定位//绝对定位元素不占据原来的位置，自动脱标，不受其他元素极其父元素的影响,
                       假如父子盒子都使用绝对定位，子元素只会在父元素内移动，不会出界，
                       给元素使用绝对定位后，自动转化为行内块元素
   z-index：数字；调整元素的层叠位置，值越高就在上面

   相对定位：
       position:relative;//就是相对于自己出发，以自己为中心左右移动，但是没有脱标，自己移动了，那一行自己也在占着呢
                           子绝父相，父元素相对定位，子元素绝对定位，位置是基于父元素绝对的
                           不会转化为行内块元素

   固定定位：
       position：fixed//脱标从浏览器出发,下拉框下拉，但是位置不变，可以说是基于屏幕

   对于脱标（定位）的盒子div margin:0 auto;是不管用的
       可以用left:50%; margin-left:负号+这个盒子的一般宽度；这时就会居中显示

   标签包含规范：p便签不能包含h1和div

   规避脱标流用margin和padding
       margin-left:auto;//让盒子靠最右边
       margin-right:auto;//让盒子靠最左边
       margin:0 auto;//居中对齐

   图片和文字垂直居中对齐
       <div>
           <img src="" alt="">123
       </div>
       vertical-align:baseline(文字在下) 对img用
           对inline-block（行内块）最好
       vertical-align:middle（文字在中间）
       vertical-align:top(文字在最上面)
       规避脱标流

   overflow:hidden;//隐藏溢出元素
   visibility:hidden;//隐藏元素，还占据原来的位置
   display:none;//隐藏元素，不占据原来的位置
   display:block;//元素可见

   内容移出:将A标签的内容文本移出看不见
       先转为行内块，在缩进
       display:inline-block;

text-indent:-5000em;

    滑动门：
       图片默认是从左到右，从上往下显示，如果想让其从右往左显示 background:url("") right;
       不写right默认就是left
       从左往右如果长度不够右边的显示不出，如果要显示右边放弃左边，就加上right

   盒子里有img标签浮动最好给盒子定义宽高

爱吹牛的小L

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3

.a{ border-top-style:soild 实线;//dotted 点线 dashed 虚线 boeder连写： border-top：边框颜色格式宽度//red soild 10px,中间那个不能少边框合并 border-collapse:collapse; 给input增加边框，得先去掉input自带
复制链接

扫一扫