笔记盒模型 dom

最新推荐文章于 2024-09-14 13:04:57 发布

shy_manOvO

最新推荐文章于 2024-09-14 13:04:57 发布

阅读量89

点赞数

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/shy_manovo/article/details/125538265

版权

本文深入探讨了HTML盒模型，包括width、height、padding、border和margin的详细属性，以及它们如何影响元素布局。同时，介绍了如何创建圆角和三角形效果。此外，文章还讲解了DOM操作，如添加、删除、修改和查找节点，以及如何通过style和classList控制元素样式。

摘要由CSDN通过智能技术生成

#盒模型

每一个标签都是一个矩形，像一个盒子，所以html页面的布局可以理解为多个盒子组合嵌套排列而成。

盒模型
width

heght

padding 内边距
1. 1到4个值
2. 顺时针赋值，从上面开始（上右下左）
3. 增加盒模型面积

border 边框
1.复合属性{
boder-width
border-style （solid，dashed， dotted，double）
border-color

2.增加盒模型面积
3.增：圆角
 border-radius: xpx;   x取值最大为边长一半，取最大值时，图形为圆形 也可以直接写50%
 单一角 border-top-right-radius:50%;


4.增：三角形

 <style>
        div{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
        }
        .s{
            width: 0;
            height: 0;
            background-color: transparent;
            border: 40px solid transparent;
            border-right-color:red ;
        }
         </style>
<body>
    <div class="s"></div>    
</body>

margin 外边距
1. 1到4个值
2. 顺时针赋值
3.注意
叠压现象：常态下，兄弟标签的上下间距以最大值为准
塌陷现象：常态下，父级的第一个子标签是个块标签，并且使用了margin或者margin-top
解决方案
1.在父级使用border 注意会增大盒模型面积视情况而定
2.在父级不使用margin-top ，在父级使用padding-top，注意盒模型面积变大要减小盒模型heigh值，会增加计算量
3.在父级使用overflow： hidden （推荐）
1.隐藏溢出
2.解决塌陷
3.清除浮动

怪异盒模型
box-sizing ： border-box （正常为content-box）

盒模型面积 s = (bl + pl + br + pr + width) * (bt + pt + bb + pb + heght)

dom操作及案例

dom增加操作

 // 增加
<div id = "wrap"></div> 
var dwrap = document.getElementByID("wrap");
 var p1 = document.creatElement("p");
 p1.innerHTML="";
 //将p1放在指定位置
 dwrap.appendchild(p1);
 //拼接节点
 fn.appendChild()
 //插入节点
 fn.insertBefore(new,old);

// 可以进行循环遍历增加
//设置,修改属性样式,通过其设置的自定义属性通过点语法是不能调用的
fn.setAttribute()
//获取属性样式
fn.getAttribute()

//克隆节点 true 包含子节点 false 不包含子节点
fn.cloneNode(true、false)
var d = drawp.cloneNode(dwrap,true);


* dom删除操作

var d = document.getElementByID("");
//删
dwrap.removeChild(d);
// 删除属性节点
//获取属性节点
var d1 = document.getElementByID("");
var c = d1.getAttributeNode("");
d1.removeAttributeNode(c);



* dom修改操作


var d1 = document.getElementByID("dw");
var p = document.creatElementByID("p");
p.innerHTML = "1";
dwrap.replaceChild(p,d1)

 * 查找操作
 fn.getElementById();
 fn.getElementByTagName();
 fn.getElementByClassName();
 fn.getElementByName();//表单常用

 fn.querySelector("");//里面写法与css类似
 fn.querySelectorAll("");//类数组

 var li2 = li1.nextElementSibling;//获取li1下一个节点
 ul.firstElementChild //获取ul下第一个子节点

 //获取节点后通过style属性控制样式，通过点语法调用标签属性，通过classList控制样式